Back to Components

TooltipHandler Component

TooltipHandler automatically creates tooltips for any HTML element with data-tooltip attributes. Perfect for server-rendered content, markdown output, or third-party widgets.

Smart Positioning System

  1. 1. Requested side: Tooltip attempts to show on the specified side
  2. 2. Opposite fallback: If no room, tries the opposite side (top↔bottom, left↔right)
  3. 3. Systematic fallback: If opposite doesn't fit, tries all sides: top → right → bottom → left
  4. 4. Centered fallback: If no side fits, centers tooltip with hidden arrow

Resize your browser window or zoom to test different viewport conditions!

🎉 Using New Multi-Selector Feature!

This demo now uses the enhanced ElementManager with multiple selector groups:

  • Single ElementManager handles both viewport and container tooltips
  • No nesting required - cleaner component structure
  • Better performance with one MutationObserver for all groups
  • Group tracking in debug info shows which group each element belongs to

Basic Tooltips

Snippet Tooltips

Regular HTML Elements

Tooltips work on any HTML element, not just buttons:

Hover over this text
Image
Div Element

Dynamic Content

TooltipHandler uses MutationObserver to detect dynamically added elements. Add multiple elements to test:

Click "Add Element" to dynamically create tooltip-enabled buttons

Container vs Viewport Positioning

TooltipHandler supports constraining tooltips within specific container boundaries:

Container Mode

Tooltips constrained to this blue container

Viewport Mode (Default)

Tooltips can extend beyond this container

Edge Case Testing

Test how the smart positioning handles extreme cases:

Data Attributes Reference

AttributeDescriptionExample
data-tooltipEnable tooltip (uses title) or specify snippet namedata-tooltip or data-tooltip="snippetName"
data-tooltip-textSet tooltip text directlydata-tooltip-text="Custom text"
data-tooltip-sideSide: top, right, bottom, leftdata-tooltip-side="right"
data-tooltip-waitWait time in millisecondsdata-tooltip-wait="200"
data-containedUse container-constrained positioningdata-contained="true"

Usage Examples

New Multi-Selector Setup (Recommended)

<script>
  import { ElementManager, TooltipHandler } from 'svelte-ui';
  let elementGroups = $state();
</script>

<!-- Single ElementManager with multiple selector groups -->
<ElementManager 
  selectors={{
    viewport: "[data-tooltip]:not([data-contained])",
    container: "[data-tooltip][data-contained]"
  }}
  bind:elements={elementGroups}
>
  {#if elementGroups?.viewport}
    <TooltipHandler elements={elementGroups.viewport} />
  {/if}
  {#if elementGroups?.container}
    <TooltipHandler 
      elements={elementGroups.container} 
      container=".modal-content" 
    />
  {/if}
  <slot />
</ElementManager>

Legacy Setup (Still Supported)

<script>
  import { ElementManager, TooltipHandler } from 'svelte-ui';
  let tooltipElements = $state(new Map());
</script>

<ElementManager 
  selector="[data-tooltip], [data-tooltip-text]" 
  bind:elements={tooltipElements}
>
  <TooltipHandler elements={tooltipElements}>
    <slot />
  </TooltipHandler>
</ElementManager>

With Custom Snippets

<ElementManager 
  selectors={{
    tooltips: "[data-tooltip], [data-tooltip-text]"
  }}
  bind:elements={elementGroups}
>
  <TooltipHandler 
    elements={elementGroups.tooltips}
    warning={warningSnippet}
    info={infoSnippet}
  >
    {#snippet warningSnippet()}
      <div class="text-center">
        <div class="font-semibold text-yellow-300">⚠️ Warning</div>
        <div class="text-xs mt-1">Action cannot be undone!</div>
      </div>
    {/snippet}
    
    {#snippet infoSnippet()}
      <div class="flex items-center gap-2">
        <span>More info</span>
        <kbd class="px-1 py-0.5 bg-white/20 rounded text-xs">?</kbd>
      </div>
    {/snippet}
    
    <slot />
  </TooltipHandler>
</ElementManager>

<!-- Then use in HTML -->
<button data-tooltip="warning">Delete</button>
<button data-tooltip-text="Simple text">Save</button>

Once added to your layout, any element with data-tooltip attributes will automatically get tooltips!