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
});

Quick Start

Hover Tooltip


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

Tutorial

Build a form with helpful tooltips on input fields.

Username

Password


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'
});

Examples

Positioning Options

Trigger Types

Dynamic Content

Hover count: 0

Best Practices

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

API Reference

Options

Option	Type	Default	Description
`content`	String	`''`	Tooltip text content
`position`	String	`'top'`	Position: top, bottom, left, right
`trigger`	String	`'hover'`	Trigger: hover, click, focus
`delay`	Number	`0`	Show delay in milliseconds
`animation`	Boolean	`true`	Enable fade animation

Methods

Method	Description
`show()`	Show tooltip immediately
`hide()`	Hide tooltip immediately
`toggle()`	Toggle tooltip visibility
`setContent(text)`	Update tooltip text
`destroy()`	Remove tooltip and clean up

Config Engine


$.setup({
    '#help-icon': {
        component: 'tooltip',
        options: {
            content: 'Click for help documentation',
            position: 'right',
            trigger: 'hover'
        }
    }
});