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>

Full Width Example

            

                Full Width TooltipThis tooltip spans 30vw
            
            

                
                
HTML
                
            
            <button class="btn btn-primary tooltip tooltip-bottom tooltip-full-width" style="--tooltip-full-size: 30vw;">
    Full Width Tooltip
    <span>This tooltip spans 30vw</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
.tooltip-full-width	Makes the tooltip span the full width of the element or a custom width
.active	Applied to show the tooltip (handled by JS or CSS hover)

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 #

Class Structure

Method/Property	Type	Description
tooltipItems	Property	NodeList of all tooltip elements
constructor()	Method	Initializes the tooltip component and sets up event listeners
init()	Method	Sets up mouseenter/mouseleave event listeners for all tooltip items
showTooltip(item)	Method	Shows the tooltip on hover/focus
hideTooltip(item)	Method	Hides the tooltip on mouse leave/blur

Implementation Example

            

                
                
JavaScript
                
            
            class Tooltip {
    constructor() {
        this.tooltipItems = document.querySelectorAll('.tooltip');
        this.init();
    }

    init() {
        this.tooltipItems.forEach(item => {
            item.addEventListener('mouseenter', () => this.showTooltip(item));
            item.addEventListener('mouseleave', () => this.hideTooltip(item));
            item.addEventListener('focus', () => this.showTooltip(item));
            item.addEventListener('blur', () => this.hideTooltip(item));
        });
    }

    showTooltip(item) {
        const tooltip = item.querySelector('span');
        if (tooltip) {
            tooltip.classList.add('active');
        }
    }

    hideTooltip(item) {
        const tooltip = item.querySelector('span');
        if (tooltip) {
            tooltip.classList.remove('active');
        }
    }
}

// Initialize tooltip when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new Tooltip();
});