Tooltip

Tooltips display informative text when users hover over or focus on an element.

Usage

Use tooltips for brief, helpful information. For longer content, consider using a popover or modal.

Basic Tooltip

This is a tooltip

<div class="df-tooltip-trigger">
  <button class="df-button">Hover me</button>
  <div class="df-tooltip">This is a tooltip</div>
</div>

Positions

Tooltip on top

Tooltip on right

Tooltip on bottom

Tooltip on left

<div class="df-tooltip df-tooltip--top">Top</div>
<div class="df-tooltip df-tooltip--right">Right</div>
<div class="df-tooltip df-tooltip--bottom">Bottom</div>
<div class="df-tooltip df-tooltip--left">Left</div>

Dark Variant

Dark themed tooltip

<div class="df-tooltip df-tooltip--dark">Dark tooltip</div>

On Icon Buttons

Settings

Delete item

Get help

JavaScript Usage

import { Tooltip } from '@everforth/design-system';

// Initialize all tooltips
Tooltip.init();

// Or initialize specific element
const tooltip = new Tooltip(element, {
  position: 'top',
  delay: 200
});

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

Accessibility

• Tooltips should supplement, not replace, visible labels
• Use aria-describedby to link elements to tooltips
• Ensure tooltips are keyboard accessible (show on focus)
• Keep tooltip text brief

Best Practices

• Keep tooltips brief (1-2 sentences max)
• Don't put essential information in tooltips
• Use consistent positioning within a UI
• Provide sufficient delay before showing
• Ensure tooltips don't block content

API Reference

Classes

Class	Description
df-tooltip	Base tooltip class
df-tooltip--top	Position above trigger
df-tooltip--right	Position to the right
df-tooltip--bottom	Position below trigger
df-tooltip--left	Position to the left
df-tooltip--dark	Dark theme

JavaScript Options

Option	Type	Default	Description
position	string	'top'	Tooltip position
delay	number	0	Show delay in ms
offset	number	8	Distance from trigger