Tooltip

The Tooltip component displays informative text when users hover over, focus on, or tap an element. It supports multiple positions and can be customized for width and appearance.

Description #

The Tooltip component provides contextual information for UI elements. It supports different positions (top, bottom, left, right) and can be set to full width. Tooltips are triggered on hover or focus, and can be styled using SCSS variables.

• Position Modes: Place the tooltip above, below, left, or right of the target element using modifier classes.

• Full Width: Make the tooltip span the full width of the element or a custom width using tooltip-full-width and a CSS variable.

• Customizable: Easily change background, border, and arrow styles via SCSS variables.

Examples and Classes #

Basic Example

            

                Top TooltipTooltip on top
                Bottom TooltipTooltip on bottom
                Left TooltipTooltip on left
                Right TooltipTooltip on right
            
            

                
                
HTML
                
            
            <button class="btn btn-primary tooltip tooltip-top">
    Top Tooltip
    <span>Tooltip on top</span>
</button>
<button class="btn btn-secondary tooltip tooltip-bottom">
    Bottom Tooltip
    <span>Tooltip on bottom</span>
</button>
<button class="btn btn-success tooltip tooltip-left">
    Left Tooltip
    <span>Tooltip on left</span>
</button>
<button class="btn btn-danger tooltip tooltip-right">
    Right Tooltip
    <span>Tooltip on right</span>
</button>

Available Classes

Class	Description
.tooltip	Base class for tooltip functionality
.tooltip-top	Positions the tooltip above the element
.tooltip-bottom	Positions the tooltip below the element
.tooltip-left	Positions the tooltip to the left of the element
.tooltip-right	Positions the tooltip to the right of the element

Layout Variations

The Tooltip component supports different layout variations:

• Positioned Tooltip: Place tooltip on top, bottom, left, or right of the element
• Full Width Tooltip: Tooltip can span the full width of the element or a custom width
• Custom Arrow: Arrow direction and style can be customized via SCSS

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/tooltip/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/tooltip/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/tooltip/script.js	JavaScript functionality

SCSS Variables #

            

                
                
SCSS
                
            
            $tooltip-bg: #222;
$tooltip-color: #fff;
$tooltip-padding: 0.5rem 1rem;
$tooltip-border-radius: 4px;
$tooltip-arrow-size: 8px;
$tooltip-arrow-color: $tooltip-bg;
$tooltip-transition: 0.2s;
$tooltip-z-index: 1000;
$tooltip-full-width: 100%;
$tooltip-box-shadow: 0 2px 8px rgba(0,0,0,0.1);

JavaScript Implementation #

Implementation Example

            

                
                
JavaScript
                
            
            // No JavaScript code