UI.BlueStack.io - Component Library

tooltip Component

Tooltip Class API Reference

Type	Class/Attribute Options	Usage	Notes
Size	`tiny / xs`	Extra small tooltip	10px font, minimal padding
	`small`	Small tooltip	12px font, compact
	(default)	Medium tooltip	14px font, standard
	`large`	Large tooltip with rich content	Supports title, description, icon
	`big / xl`	Extra large tooltip	16px font, max content
Position	`top`	Above element, centered	Default position
	`top-start`	Above element, aligned to start	Arrow on left
	`top-end`	Above element, aligned to end	Arrow on right
	`bottom`	Below element, centered	Common alternative
	`bottom-start`	Below element, aligned to start	Arrow on left
	`bottom-end`	Below element, aligned to end	Arrow on right
	`left`	Left of element, centered	For side tooltips
	`left-start`	Left of element, aligned to top	Arrow at top
	`left-end`	Left of element, aligned to bottom	Arrow at bottom
	`right`	Right of element, centered	For side tooltips
	`right-start`	Right of element, aligned to top	Arrow at top
	`right-end`	Right of element, aligned to bottom	Arrow at bottom
Theme/Color	(default)	Light theme	White background
	`dark`	Dark theme	Dark background
	`primary`	Primary brand color	Blue theme
	`positive / success`	Success state	Green theme
	`negative / error`	Error state	Red theme
	`warning`	Warning state	Yellow theme
	`info`	Information	Blue theme
Trigger	`hover`	Show on mouse hover	Default trigger
	`click`	Show on click	Sticky tooltip
	`focus`	Show on focus	For form elements
	`hover-focus`	Show on hover or focus	Best accessibility
	`manual`	Programmatic control	Via JavaScript
Animation	`fade`	Fade in/out	Default animation
	`scale`	Scale in/out	Zoom effect
	`slide`	Slide from position	Directional slide

Basic Usage

Simple tooltips with data attributes. Hover over the elements to see tooltips.

Default Tooltip

Hover this link Hover this text

<div class="flex items-center gap-4">
            <button class="button" data-tooltip="This is a simple tooltip">Hover me</button>
            <a href="#" data-tooltip="Links can have tooltips too!">Hover this link</a>
            <span data-tooltip="Any element can have a tooltip" class="text-blue-600 cursor-help">Hover this text</span>
        </div>

Different Sizes

<div class="flex items-center gap-4">
            <button class="button tiny" data-tooltip="Tiny tooltip" data-tooltip-size="tiny">Tiny</button>
            <button class="button small" data-tooltip="Small tooltip text" data-tooltip-size="small">Small</button>
            <button class="button" data-tooltip="Default size tooltip with standard text">Default</button>
            <button class="button large" 
                    data-tooltip="Large tooltips can contain much more content and will wrap automatically when needed" 
                    data-tooltip-size="large">Large</button>
            <button class="button big" 
                    data-tooltip="Extra large tooltips are perfect for detailed explanations and can contain a lot of text that wraps nicely" 
                    data-tooltip-size="xl">XL</button>
        </div>

Positioning

Tooltips can be positioned in 12 different locations around the target element.

Cardinal Positions

<div class="grid grid-cols-4 gap-4">
            <button class="button" data-tooltip="Top position" data-tooltip-position="top">Top</button>
            <button class="button" data-tooltip="Bottom position" data-tooltip-position="bottom">Bottom</button>
            <button class="button" data-tooltip="Left position" data-tooltip-position="left">Left</button>
            <button class="button" data-tooltip="Right position" data-tooltip-position="right">Right</button>
        </div>

Advanced Positions

<div class="grid grid-cols-3 gap-4">
            <button class="button small" data-tooltip="Top Start" data-tooltip-position="top-start">Top Start</button>
            <button class="button small" data-tooltip="Top End" data-tooltip-position="top-end">Top End</button>
            <button class="button small" data-tooltip="Bottom Start" data-tooltip-position="bottom-start">Bottom Start</button>
            <button class="button small" data-tooltip="Bottom End" data-tooltip-position="bottom-end">Bottom End</button>
            <button class="button small" data-tooltip="Left Start" data-tooltip-position="left-start">Left Start</button>
            <button class="button small" data-tooltip="Left End" data-tooltip-position="left-end">Left End</button>
            <button class="button small" data-tooltip="Right Start" data-tooltip-position="right-start">Right Start</button>
            <button class="button small" data-tooltip="Right End" data-tooltip-position="right-end">Right End</button>
        </div>

<div class="grid grid-cols-3 gap-4">
            <button class="button small" data-tooltip="Top Start" data-tooltip-position="top-start">Top Start</button>
            <button class="button small" data-tooltip="Top End" data-tooltip-position="top-end">Top End</button>
            <button class="button small" data-tooltip="Bottom Start" data-tooltip-position="bottom-start">Bottom Start</button>
            <button class="button small" data-tooltip="Bottom End" data-tooltip-position="bottom-end">Bottom End</button>
            <button class="button small" data-tooltip="Left Start" data-tooltip-position="left-start">Left Start</button>
            <button class="button small" data-tooltip="Left End" data-tooltip-position="left-end">Left End</button>
            <button class="button small" data-tooltip="Right Start" data-tooltip-position="right-start">Right Start</button>
            <button class="button small" data-tooltip="Right End" data-tooltip-position="right-end">Right End</button>
        </div>

Color Themes

Apply different color themes to match your UI's context and state.

Theme Variations

<div class="flex flex-wrap items-center gap-3">
            <button class="button" data-tooltip="Default light theme">Default</button>
            <button class="button" data-tooltip="Dark theme tooltip" data-tooltip-theme="dark">Dark</button>
            <button class="button primary" data-tooltip="Primary theme matches button" data-tooltip-theme="primary">Primary</button>
            <button class="button positive" data-tooltip="Success! Operation completed" data-tooltip-theme="success">Success</button>
            <button class="button negative" data-tooltip="Error! Something went wrong" data-tooltip-theme="error">Error</button>
            <button class="button warning" data-tooltip="Warning! Please be careful" data-tooltip-theme="warning">Warning</button>
            <button class="button info" data-tooltip="Info: This is informational" data-tooltip-theme="info">Info</button>
        </div>

Trigger Types

Control how tooltips are triggered based on user interaction.

Different Triggers

<div class="flex flex-wrap items-center gap-4">
            <button class="button" data-tooltip="Shows on hover (default)">Hover Trigger</button>
            <button class="button" data-tooltip="Click to toggle this tooltip" data-tooltip-trigger="click">Click Trigger</button>
            <input type="text" class="input" placeholder="Focus this input" 
                   data-tooltip="Shows when input is focused" data-tooltip-trigger="focus">
            <button class="button" data-tooltip="Works with hover AND focus" data-tooltip-trigger="hover-focus">Hover + Focus</button>
        </div>

Rich Content Tooltips

Large tooltips with icons, titles, descriptions, and actions.

Complex Tooltip Structure

<div class="flex items-center gap-4">
            
            <button class="button primary" 
                    data-tooltip-trigger="click"
                    data-tooltip-size="large"
                    data-tooltip-title="Welcome to Tooltips!"
                    data-tooltip="These enhanced tooltips support rich content including icons, titles, descriptions, and even action buttons."
                    data-tooltip-icon="info"
                    data-tooltip-close="true">
                Rich Content
            </button>
            
            
            <button class="button" 
                    data-tooltip="This tooltip stays open when you hover over it"
                    data-tooltip-interactive="true"
                    data-tooltip-html="true"
                    data-tooltip-size="large">
                Interactive
            </button>
        </div>

HTML Content

<div class="flex items-center gap-4">
            <button class="button" 
                    data-tooltip="<strong>Bold text</strong><br><em>Italic text</em><br><code>Code snippet</code>"
                    data-tooltip-html="true">
                HTML Content
            </button>
            
            <button class="button" 
                    data-tooltip="Visit <a href='https://ui.bluestack.io' target='_blank'>our website</a> for more"
                    data-tooltip-html="true"
                    data-tooltip-interactive="true">
                With Links
            </button>
        </div>

Timing Controls

Control show/hide delays for better UX.

Delay Options

<div class="flex items-center gap-4">
            <button class="button" data-tooltip="No delay (instant)" data-tooltip-delay-show="0">Instant</button>
            <button class="button" data-tooltip="Default 200ms delay">Default Delay</button>
            <button class="button" data-tooltip="500ms show delay" data-tooltip-delay-show="500">Slow Show</button>
            <button class="button" data-tooltip="This stays visible longer" data-tooltip-delay-hide="1000">Slow Hide</button>
        </div>

Animations

Different animation styles for tooltip appearance.

Animation Types

<div class="flex items-center gap-4">
            <button class="button" data-tooltip="Fade animation (default)">Fade</button>
            <button class="button" data-tooltip="Scale animation" data-tooltip-animation="scale">Scale</button>
            <button class="button" data-tooltip="Slide from top" data-tooltip-animation="slide">Slide</button>
            <button class="button" data-tooltip="Slide from bottom" data-tooltip-animation="slide" data-tooltip-position="bottom">Slide Bottom</button>
        </div>

Accessibility Features

Tooltips include ARIA attributes and keyboard support.

Accessible Tooltips

All tooltips have role="tooltip" and proper ARIA attributes
Press Escape to close any visible tooltip
Focus triggers work for keyboard navigation
Animations respect prefers-reduced-motion media query
Mobile support with long-press gesture

<div class="space-y-4">
            <div class="flex items-center gap-4">
                <button class="button" data-tooltip="Press Escape to close any tooltip">Keyboard Support</button>
                <button class="button" data-tooltip="This tooltip works with screen readers">Screen Reader Friendly</button>
                <button class="button" data-tooltip="Respects prefers-reduced-motion">Motion Preferences</button>
            </div>
            <div class="text-sm text-gray-600">
                <ul class="list-disc list-inside space-y-1">
                    <li>All tooltips have <code>role="tooltip"</code> and proper ARIA attributes</li>
                    <li>Press <kbd>Escape</kbd> to close any visible tooltip</li>
                    <li>Focus triggers work for keyboard navigation</li>
                    <li>Animations respect <code>prefers-reduced-motion</code> media query</li>
                    <li>Mobile support with long-press gesture</li>
                </ul>
            </div>
        </div>

<div class="space-y-4">
            <div class="flex items-center gap-4">
                <button class="button" data-tooltip="Press Escape to close any tooltip">Keyboard Support</button>
                <button class="button" data-tooltip="This tooltip works with screen readers">Screen Reader Friendly</button>
                <button class="button" data-tooltip="Respects prefers-reduced-motion">Motion Preferences</button>
            </div>
            <div class="text-sm text-gray-600">
                <ul class="list-disc list-inside space-y-1">
                    <li>All tooltips have <code>role="tooltip"</code> and proper ARIA attributes</li>
                    <li>Press <kbd>Escape</kbd> to close any visible tooltip</li>
                    <li>Focus triggers work for keyboard navigation</li>
                    <li>Animations respect <code>prefers-reduced-motion</code> media query</li>
                    <li>Mobile support with long-press gesture</li>
                </ul>
            </div>
        </div>

Utility Options

Additional utility classes and options.

Max Width Control

<div class="flex items-center gap-4">
            <button class="button small" 
                    data-tooltip="This tooltip has a maximum width of 200px and will wrap text accordingly"
                    data-tooltip-max-width="xs">
                Max XS
            </button>
            <button class="button small" 
                    data-tooltip="This tooltip has a maximum width of 300px which allows for more content before wrapping"
                    data-tooltip-max-width="sm">
                Max SM
            </button>
            <button class="button small" 
                    data-tooltip="This tooltip has a maximum width of 400px providing ample space for detailed explanations and longer content"
                    data-tooltip-max-width="md">
                Max MD
            </button>
        </div>

No Arrow Option

<div class="flex items-center gap-4">
            <button class="button" data-tooltip="Tooltip with arrow (default)">With Arrow</button>
            <button class="button" data-tooltip="This tooltip has no arrow" data-tooltip-arrow="false">No Arrow</button>
        </div>

JavaScript API

Programmatic control via hygge.on.tooltip methods.

Manual Control

// Show tooltip
hygge.on.tooltip.show(element, options);

// Hide tooltip
hygge.on.tooltip.hide(element);

// Toggle tooltip
hygge.on.tooltip.toggle(element);

// Update content
hygge.on.tooltip.update(element, {
    text: 'New content',
    title: 'New title'
});

// Hide all tooltips
hygge.on.tooltip.hideAll();

<div class="space-y-4">
            <div class="flex items-center gap-4">
                <button class="button primary" id="manual-tooltip" data-tooltip-trigger="manual">Manual Tooltip Target</button>
                <button class="button" onclick="hygge.on.tooltip.show($('#manual-tooltip')[0])">Show</button>
                <button class="button" onclick="hygge.on.tooltip.hide($('#manual-tooltip')[0])">Hide</button>
                <button class="button" onclick="hygge.on.tooltip.toggle($('#manual-tooltip')[0])">Toggle</button>
            </div>
            
            <div class="bg-gray-100 p-4 rounded-lg">
                <pre class="text-sm"><code>// Show tooltip
hygge.on.tooltip.show(element, options);

// Hide tooltip
hygge.on.tooltip.hide(element);

// Toggle tooltip
hygge.on.tooltip.toggle(element);

// Update content
hygge.on.tooltip.update(element, {
    text: 'New content',
    title: 'New title'
});

// Hide all tooltips
hygge.on.tooltip.hideAll();</code></pre>
            </div>
        </div>

<div class="space-y-4">
            <div class="flex items-center gap-4">
                <button class="button primary" id="manual-tooltip" data-tooltip-trigger="manual">Manual Tooltip Target</button>
                <button class="button" onclick="hygge.on.tooltip.show($('#manual-tooltip')[0])">Show</button>
                <button class="button" onclick="hygge.on.tooltip.hide($('#manual-tooltip')[0])">Hide</button>
                <button class="button" onclick="hygge.on.tooltip.toggle($('#manual-tooltip')[0])">Toggle</button>
            </div>
            
            <div class="bg-gray-100 p-4 rounded-lg">
                <pre class="text-sm"><code>// Show tooltip
hygge.on.tooltip.show(element, options);

// Hide tooltip
hygge.on.tooltip.hide(element);

// Toggle tooltip
hygge.on.tooltip.toggle(element);

// Update content
hygge.on.tooltip.update(element, {
    text: 'New content',
    title: 'New title'
});

// Hide all tooltips
hygge.on.tooltip.hideAll();</code></pre>
            </div>
        </div>

Dynamic Updates

<div class="space-y-4">
            <button class="button" id="dynamic-tooltip" 
                    data-tooltip="Original content" 
                    data-tooltip-trigger="hover"
                    onmouseover="updateTooltipContent()">
                Hover for Dynamic Content
            </button>
            
            <script>
                let counter = 0;
                function updateTooltipContent() {
                    counter++;
                    hygge.on.tooltip.update($('#dynamic-tooltip')[0], {
                        text: 'Updated ' + counter + ' times'
                    });
                }
            </script>
        </div>

Complex Examples

Real-world tooltip implementations.

Form Validation Helper

<form class="space-y-4 max-w-md">
            <div>
                <label class="block text-sm font-medium mb-1">Username</label>
                <input type="text" class="input" placeholder="Enter username"
                       data-tooltip="Username must be 3-20 characters, alphanumeric only"
                       data-tooltip-trigger="focus"
                       data-tooltip-position="right">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Password</label>
                <input type="password" class="input" placeholder="Enter password"
                       data-tooltip="Password must be at least 8 characters with 1 uppercase, 1 lowercase, and 1 number"
                       data-tooltip-trigger="focus"
                       data-tooltip-position="right"
                       data-tooltip-theme="warning">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Email</label>
                <input type="email" class="input" placeholder="Enter email"
                       data-tooltip="We'll never share your email"
                       data-tooltip-trigger="focus"
                       data-tooltip-position="right"
                       data-tooltip-theme="info">
            </div>
        </form>

<form class="space-y-4 max-w-md">
            <div>
                <label class="block text-sm font-medium mb-1">Username</label>
                <input type="text" class="input" placeholder="Enter username"
                       data-tooltip="Username must be 3-20 characters, alphanumeric only"
                       data-tooltip-trigger="focus"
                       data-tooltip-position="right">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Password</label>
                <input type="password" class="input" placeholder="Enter password"
                       data-tooltip="Password must be at least 8 characters with 1 uppercase, 1 lowercase, and 1 number"
                       data-tooltip-trigger="focus"
                       data-tooltip-position="right"
                       data-tooltip-theme="warning">
            </div>
            <div>
                <label class="block text-sm font-medium mb-1">Email</label>
                <input type="email" class="input" placeholder="Enter email"
                       data-tooltip="We'll never share your email"
                       data-tooltip-trigger="focus"
                       data-tooltip-position="right"
                       data-tooltip-theme="info">
            </div>
        </form>

Icon Buttons with Tooltips

<div class="flex items-center gap-2">
            <button class="button ghost small" data-tooltip="Edit">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                </svg>
            </button>
            <button class="button ghost small" data-tooltip="Delete" data-tooltip-theme="error">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                </svg>
            </button>
            <button class="button ghost small" data-tooltip="Share" data-tooltip-theme="primary">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m9.032 4.026a3 3 0 10-4.42 4.42l1.434-1.434a3 3 0 011.986-2.986zm-7.448-7.448a3 3 0 105.592 0H9"></path>
                </svg>
            </button>
            <button class="button ghost small" data-tooltip="Download" data-tooltip-theme="success">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
                </svg>
            </button>
            <button class="button ghost small" data-tooltip="Settings">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
            </button>
        </div>

Table with Cell Tooltips

Feature	Status	Info
Auto-positioning	Active	ℹ️
Mobile Support	Active	ℹ️
Accessibility	Active	ℹ️

<table class="w-full">
            <thead>
                <tr class="border-b">
                    <th class="text-left p-2">Feature</th>
                    <th class="text-left p-2">Status</th>
                    <th class="text-left p-2">Info</th>
                </tr>
            </thead>
            <tbody>
                <tr class="border-b">
                    <td class="p-2">Auto-positioning</td>
                    <td class="p-2">
                        <span class="badge positive small" data-tooltip="Fully implemented and tested">Active</span>
                    </td>
                    <td class="p-2">
                        <span class="text-blue-600 cursor-help" data-tooltip="Tooltips automatically adjust position when near viewport edges">ℹ️</span>
                    </td>
                </tr>
                <tr class="border-b">
                    <td class="p-2">Mobile Support</td>
                    <td class="p-2">
                        <span class="badge positive small" data-tooltip="Long-press gesture support">Active</span>
                    </td>
                    <td class="p-2">
                        <span class="text-blue-600 cursor-help" data-tooltip="Works on touch devices with long-press gesture">ℹ️</span>
                    </td>
                </tr>
                <tr class="border-b">
                    <td class="p-2">Accessibility</td>
                    <td class="p-2">
                        <span class="badge positive small" data-tooltip="WCAG 2.1 compliant">Active</span>
                    </td>
                    <td class="p-2">
                        <span class="text-blue-600 cursor-help" data-tooltip="Full ARIA support and keyboard navigation">ℹ️</span>
                    </td>
                </tr>
            </tbody>
        </table>

<table class="w-full">
            <thead>
                <tr class="border-b">
                    <th class="text-left p-2">Feature</th>
                    <th class="text-left p-2">Status</th>
                    <th class="text-left p-2">Info</th>
                </tr>
            </thead>
            <tbody>
                <tr class="border-b">
                    <td class="p-2">Auto-positioning</td>
                    <td class="p-2">
                        <span class="badge positive small" data-tooltip="Fully implemented and tested">Active</span>
                    </td>
                    <td class="p-2">
                        <span class="text-blue-600 cursor-help" data-tooltip="Tooltips automatically adjust position when near viewport edges">ℹ️</span>
                    </td>
                </tr>
                <tr class="border-b">
                    <td class="p-2">Mobile Support</td>
                    <td class="p-2">
                        <span class="badge positive small" data-tooltip="Long-press gesture support">Active</span>
                    </td>
                    <td class="p-2">
                        <span class="text-blue-600 cursor-help" data-tooltip="Works on touch devices with long-press gesture">ℹ️</span>
                    </td>
                </tr>
                <tr class="border-b">
                    <td class="p-2">Accessibility</td>
                    <td class="p-2">
                        <span class="badge positive small" data-tooltip="WCAG 2.1 compliant">Active</span>
                    </td>
                    <td class="p-2">
                        <span class="text-blue-600 cursor-help" data-tooltip="Full ARIA support and keyboard navigation">ℹ️</span>
                    </td>
                </tr>
            </tbody>
        </table>