Tooltip

Tooltips display contextual information when users hover over, focus on, or click an element. They're perfect for providing hints, definitions, or additional context without cluttering the interface.

Key Features

• Multiple Triggers - Hover, click, or focus activation
• Positioning - Top, bottom, left, or right placement
• Show Delay - Configurable delay before display
• Animations - Smooth fade-in transitions
• Dynamic Content - Update tooltip text on the fly
• Auto-positioning - Smart placement to avoid viewport edges

Basic Usage

const tooltip = Domma.elements.tooltip('#my-button', {
    content: 'Helpful information here',
    position: 'top',
    trigger: 'hover',
    delay: 200
});

Add tooltips to your elements in three simple steps

Step 1: Add HTML Element

Create any HTML element that will trigger the tooltip:

<button id="my-button" class="btn btn-primary">Hover Me</button>
<span id="help-icon">?</span>
<a id="info-link" href="#">Learn more</a>

Step 2: Include Domma

Add Domma CSS and JavaScript to your page:

<!-- CSS -->
<link rel="stylesheet" href="dist/domma.css">
<link rel="stylesheet" href="dist/elements.css">

<!-- JavaScript -->
<script src="dist/domma.min.js"></script>

Step 3: Initialize the Tooltip

Call Domma.elements.tooltip() to attach a tooltip:

// Hover tooltip
Domma.elements.tooltip('#my-button', {
    content: 'Helpful information appears here',
    position: 'top',       // 'top', 'bottom', 'left', 'right'
    trigger: 'hover',      // 'hover', 'click', 'focus'
    delay: 200             // Delay before showing (ms)
});

// Click tooltip with HTML content
Domma.elements.tooltip('#help-icon', {
    content: '<strong>Tip:</strong> Click to continue',
    trigger: 'click',
    position: 'bottom'
});

Domma Tooltip is now available as a native Web Component! Use modern <domma-tooltip> tags or the traditional wrapper API - both work identically with zero breaking changes.

Direct Web Component Usage

Wrap trigger elements in <domma-tooltip> tags:

<domma-tooltip content="Top tooltip" position="top">
    <button class="btn btn-primary">Top</button>
</domma-tooltip>

<domma-tooltip content="Bottom tooltip" position="bottom">
    <button class="btn btn-primary">Bottom</button>
</domma-tooltip>

Trigger Types

<domma-tooltip content="Hover trigger" trigger="hover">
    <button>Hover</button>
</domma-tooltip>

<domma-tooltip content="Click trigger" trigger="click">
    <button>Click</button>
</domma-tooltip>

<domma-tooltip content="Focus trigger" trigger="focus">
    <input type="text" placeholder="Focus me">
</domma-tooltip>

Delay Configuration

Control show and hide delays:

<domma-tooltip content="Instant" delay="0">
    <button>No Delay</button>
</domma-tooltip>

<domma-tooltip content="Delayed" delay="500" hide-delay="300">
    <button>With Delays</button>
</domma-tooltip>

Programmatic API

Web Components support dynamic updates:

const tooltip = $('domma-tooltip')[0];

// Update content
tooltip.setContent('New tooltip text!');

// Update position
tooltip.setPosition('bottom');

// Show/hide programmatically
tooltip.show();
tooltip.hide();
tooltip.toggle();

// Check visibility
if (tooltip.isVisible()) {
    console.log('Tooltip is showing');
}

Wrapper API (Backwards Compatible)

Existing code continues to work unchanged! The wrapper API uses Web Components internally:

// Traditional approach - still works!
const tooltip = Domma.elements.tooltip('#my-element', {
    content: 'Helpful information here',
    position: 'top',
    trigger: 'hover',
    delay: 200
});

// Same API as before
tooltip.show();
tooltip.hide();
tooltip.setContent('Updated text');
tooltip.destroy();

Hover Tooltip

Domma.elements.tooltip('#button', {
    content: 'This appears on hover',
    position: 'top'
});

Build a form with helpful tooltips on input fields.

Domma.elements.tooltip('#username-help', {
    content: 'Username must be 3-20 characters',
    position: 'right',
    trigger: 'hover'
});

Domma.elements.tooltip('#password-help', {
    content: 'Password must be at least 8 characters',
    position: 'right',
    trigger: 'hover'
});

Positioning Options

Trigger Types

Dynamic Content

Accessibility

• Keyboard Access - Use focus trigger for keyboard users
• ARIA Labels - Add aria-describedby linking to tooltip
• Don't Hide Critical Info - Essential information shouldn't require tooltip interaction

Performance

• Reuse Instances - Don't recreate tooltips on every interaction
• Delay Hover - Use 200ms+ delay to avoid accidental triggers

Options

Methods

Override these CSS variables to customise Tooltip appearance and match your design system.

Example Override

/* Light tooltip - override inline or create custom class */
.tooltip-light {
    background: #f9fafb;
    color: #1f2937;
}

Full CSS Customisation Cheat-Sheet →