Tooltips

Overview #

The Tooltip component provides additional information when a user hovers over interactive elements. You can position it in various directions (top, bottom, left, right), and it can span the full width of the screen if needed.

Usage Example #

    

PrimaryClick Here
    
    

        
        
HTML
        
    
    <button class="btn btn-primary tooltip tooltip-bottom tooltip-full-width">
    Primary
    <span>Click Here</span>
</button>

Example #

    
                   
        right TooltipTooltip Text
        Top TooltipTooltip Text
        left TooltipTooltip Text
        bottom TooltipTooltip Text
     
    

        
        
HTML
        
    
    <button class="btn btn-primary tooltip tooltip-top">
    Top Tooltip
    <span>Tooltip Text</span>
</button>
<button class="btn btn-primary tooltip tooltip-bottom">
    Bottom Tooltip
    <span>Tooltip Text</span>
</button>
<button class="btn btn-primary tooltip tooltip-left">
    Left Tooltip
    <span>Tooltip Text</span>
</button>
<button class="btn btn-primary tooltip tooltip-right">
    Right Tooltip
    <span>Tooltip Text</span>
</button>
<button class="btn btn-primary tooltip tooltip-bottom tooltip-full-width">
    Full-width Tooltip
    <span>Click Here</span>
</button>

Classes #

Tooltip component includes the following classes:

Customization #

Tooltips can be customized using SCSS variables and mixins. The background color, border, and arrow can be modified as needed.

    

        
        
SCSS
        
    
    .tooltip {
    &.tooltip-full-width { span { width: var(--tooltip-full-size); } }
    &.tooltip-top { ... }
    &.tooltip-bottom { ... }
    &.tooltip-left { ... }
    &.tooltip-right { ... }
    span { opacity: 0; transition: .2s; &:hover { opacity: 1; } }
}