Tooltip

Tooltips display informative text when users hover over, focus on, or tap an element. They provide brief, helpful information about an element.

Basic Usage

Wrap the trigger element with .tooltip and add .tooltip-content for the tooltip text. The tooltip appears automatically on hover.

<div class="tooltip">
<button class="btn btn-primary">Hover me</button>
<span class="tooltip-content">This is a tooltip</span>
</div>

Positions

Top (Default)

<div class="tooltip tooltip-top">
<button class="btn btn-primary">Top</button>
<span class="tooltip-content">Tooltip on top</span>
</div>

Bottom

<div class="tooltip tooltip-bottom">
<button class="btn btn-primary">Bottom</button>
<span class="tooltip-content">Tooltip on bottom</span>
</div>

Left

<div class="tooltip tooltip-left">
<button class="btn btn-primary">Left</button>
<span class="tooltip-content">Tooltip on left</span>
</div>

Right

<div class="tooltip tooltip-right">
<button class="btn btn-primary">Right</button>
<span class="tooltip-content">Tooltip on right</span>
</div>

All Positions

<div class="tooltip tooltip-top">
<button class="btn">Top</button>
<span class="tooltip-content">Top tooltip</span>
</div>

<div class="tooltip tooltip-bottom">
<button class="btn">Bottom</button>
<span class="tooltip-content">Bottom tooltip</span>
</div>

<div class="tooltip tooltip-left">
<button class="btn">Left</button>
<span class="tooltip-content">Left tooltip</span>
</div>

<div class="tooltip tooltip-right">
<button class="btn">Right</button>
<span class="tooltip-content">Right tooltip</span>
</div>

Color Variants

Primary

<div class="tooltip tooltip-primary">
<button class="btn btn-primary">Primary</button>
<span class="tooltip-content">Primary colored tooltip</span>
</div>

Secondary

<div class="tooltip tooltip-secondary">
<button class="btn btn-secondary">Secondary</button>
<span class="tooltip-content">Secondary colored tooltip</span>
</div>

Error

<div class="tooltip tooltip-error">
<button class="btn btn-error">Error</button>
<span class="tooltip-content">Error colored tooltip</span>
</div>

Light

<div class="tooltip tooltip-light">
<button class="btn">Light</button>
<span class="tooltip-content">Light themed tooltip</span>
</div>

Multi-line Tooltip

For longer text that needs to wrap.

<div class="tooltip tooltip-multiline">
<button class="btn btn-primary">Multi-line</button>
<span class="tooltip-content">This is a longer tooltip message that wraps to multiple lines for better readability.</span>
</div>

Rich Tooltip

For tooltips with structured content like titles and descriptions.

<div class="tooltip tooltip-rich">
<button class="btn btn-primary">Rich Content</button>
<div class="tooltip-content">
  <div class="tooltip-rich-title">Keyboard Shortcut</div>
  <div class="tooltip-rich-description">Press Ctrl+S to save your work</div>
</div>
</div>

Delay Variants

Add delay before showing the tooltip.

<div class="tooltip tooltip-delay">
<button class="btn">Short Delay (300ms)</button>
<span class="tooltip-content">Appears after 300ms</span>
</div>

<div class="tooltip tooltip-delay-long">
<button class="btn">Long Delay (500ms)</button>
<span class="tooltip-content">Appears after 500ms</span>
</div>

Interactive Tooltip

Allow users to interact with the tooltip content (e.g., click links).

<div class="tooltip tooltip-interactive tooltip-rich">
<button class="btn btn-primary">Interactive</button>
<div class="tooltip-content">
  <div class="tooltip-rich-title">Learn More</div>
  <div class="tooltip-rich-description">
    Visit our <a href="#" style="color: var(--color-primary-container); text-decoration: underline;">documentation</a> for details.
  </div>
</div>
</div>

Always Open (For Demo)

Use .tooltip-open class to force the tooltip to always show.

<div class="tooltip tooltip-open">
<button class="btn btn-primary">Top (default)</button>
<span class="tooltip-content">Top tooltip always visible</span>
</div>

<div class="tooltip tooltip-bottom tooltip-open">
<button class="btn btn-primary">Bottom</button>
<span class="tooltip-content">Bottom tooltip always visible</span>
</div>

<div class="tooltip tooltip-left tooltip-open">
<button class="btn btn-primary">Left</button>
<span class="tooltip-content">Left tooltip always visible</span>
</div>

<div class="tooltip tooltip-right tooltip-open">
<button class="btn btn-primary">Right</button>
<span class="tooltip-content">Right tooltip always visible</span>
</div>

With Different Elements

Tooltips work with any element, not just buttons.

<div class="tooltip">
<span style="text-decoration: underline; cursor: help;">Hover this text</span>
<span class="tooltip-content">Helpful information</span>
</div>

<div class="tooltip tooltip-primary">
<span style="font-size: 1.5rem; cursor: pointer;">ℹ️</span>
<span class="tooltip-content">Info icon tooltip</span>
</div>

<div class="tooltip tooltip-bottom">
<input type="text" class="input input-bordered" placeholder="Focus me" style="width: 150px;">
<span class="tooltip-content">Enter your username</span>
</div>

JavaScript Integration

Data Attribute Approach

// Automatically create tooltips from data-tooltip attribute
document.querySelectorAll('[data-tooltip]').forEach(element => {
  const text = element.getAttribute('data-tooltip');
  const position = element.getAttribute('data-tooltip-position') || 'top';

  // Wrap element with tooltip container
  const wrapper = document.createElement('div');
  wrapper.className = `tooltip tooltip-${position}`;
  element.parentNode.insertBefore(wrapper, element);
  wrapper.appendChild(element);

  // Add tooltip content
  const content = document.createElement('span');
  content.className = 'tooltip-content';
  content.textContent = text;
  wrapper.appendChild(content);
});

// Usage in HTML:
// <button data-tooltip="Save your changes" data-tooltip-position="bottom">Save</button>

Programmatic Control

// Show/hide tooltip programmatically
function showTooltip(element) {
  element.closest('.tooltip')?.classList.add('tooltip-open');
}

function hideTooltip(element) {
  element.closest('.tooltip')?.classList.remove('tooltip-open');
}

// Toggle tooltip
function toggleTooltip(element) {
  element.closest('.tooltip')?.classList.toggle('tooltip-open');
}

React Example

import { ReactNode } from 'react';

interface TooltipProps {
  children: ReactNode;
  content: string;
  position?: 'top' | 'bottom' | 'left' | 'right';
  variant?: 'primary' | 'secondary' | 'error' | 'light';
}

export function Tooltip({
  children,
  content,
  position = 'top',
  variant
}: TooltipProps) {
  const classes = [
    'tooltip',
    `tooltip-${position}`,
    variant && `tooltip-${variant}`
  ].filter(Boolean).join(' ');

  return (
    <div className={classes}>
      {children}
      <span className="tooltip-content">{content}</span>
    </div>
  );
}

// Usage
<Tooltip content="Save your work" position="bottom" variant="primary">
  <button className="btn btn-primary">Save</button>
</Tooltip>

Vue Example

<template>
  <div :class="tooltipClasses">
    <slot />
    <span class="tooltip-content">{{ content }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  content: { type: String, required: true },
  position: { type: String, default: 'top' },
  variant: { type: String, default: null }
});

const tooltipClasses = computed(() => [
  'tooltip',
  `tooltip-${props.position}`,
  props.variant && `tooltip-${props.variant}`
].filter(Boolean));
</script>

<!-- Usage -->
<Tooltip content="Delete this item" position="left" variant="error">
  <button class="btn btn-error">Delete</button>
</Tooltip>

API Reference

Class Names

Rich Tooltip Classes

Accessibility

• Tooltips are shown on both hover and focus for keyboard users
• Use aria-describedby to link the tooltip to the trigger element for screen readers
• Keep tooltip text concise and informative
• Don’t put essential information only in tooltips

<div class="tooltip">
  <button aria-describedby="tooltip-1">Help</button>
  <span class="tooltip-content" id="tooltip-1" role="tooltip">
    Click for assistance
  </span>
</div>

Best Practices

1. Keep it brief - Tooltips should contain short, helpful text
2. Don’t hide critical info - Essential information should be visible without hover
3. Consider touch devices - Tooltips require hover, so provide alternatives for mobile
4. Use appropriate delay - Add delay for tooltips that might trigger accidentally
5. Position thoughtfully - Ensure tooltips don’t get cut off by viewport edges

Related Components

• Popover - For richer, interactive popup content
• Snackbar - For brief notification messages
• Dialog - For modal interactions

See Also

• Tooltip (Material Design 3)
• Quick Start Guide