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

Preview Code

Copy

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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

// 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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

<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

Preview Code

Copy

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>