Skip to Content
Dashflow Logo

Tooltip Component

A comprehensive guide to using the Tooltip component with examples, props, and best practices.

Overview

The Tooltip component provides contextual information when users hover over or focus on an element. It's a great way to provide additional details, explanations, or help text without cluttering the interface.

Basic Usage

import { Tooltip } from '@dashflowx/core'


export default function TooltipExample() {
  return (
    <Tooltip 
      tooltipTrigger={<button>Hover me</button>}
      tooltipContent="This is a helpful tooltip"
    />
  )
}

Preview:

Hover me
This is a helpful tooltip

Props

PropTypeDefaultDescription
tooltipTriggerReact.ReactNode-The element that triggers the tooltip
tooltipContentReact.ReactNode-The content to display in the tooltip
side'top' | 'bottom' | 'left' | 'right''top'The side where the tooltip appears
align'start' | 'center' | 'end''center'The alignment of the tooltip
classNamestring''Additional CSS classes for the tooltip

Examples

Basic Tooltip

<Tooltip 
  tooltipTrigger={<button>Hover me</button>}
  tooltipContent="This is a basic tooltip"
/>

Preview:

Hover me
This is a basic tooltip

Different Positions

<div className="flex space-x-4">
  <Tooltip 
    tooltipTrigger={<button>Top</button>}
    tooltipContent="Tooltip on top"
    side="top"
  />
  <Tooltip 
    tooltipTrigger={<button>Bottom</button>}
    tooltipContent="Tooltip on bottom"
    side="bottom"
  />
  <Tooltip 
    tooltipTrigger={<button>Left</button>}
    tooltipContent="Tooltip on left"
    side="left"
  />
  <Tooltip 
    tooltipTrigger={<button>Right</button>}
    tooltipContent="Tooltip on right"
    side="right"
  />
</div>

Preview:

Top
Tooltip on top

Rich Content Tooltip

<Tooltip 
  tooltipTrigger={<button>Rich Content</button>}
  tooltipContent={
    <div>
      <h4 className="font-semibold">Feature Details</h4>
      <p className="text-sm">This feature provides advanced functionality.</p>
    </div>
  }
/>

Preview:

Rich Content
Feature Details: This feature provides advanced functionality.

Custom Styled Tooltip

<Tooltip 
  tooltipTrigger={<button>Custom Style</button>}
  tooltipContent="Custom styled tooltip"
  className="bg-blue-500 text-white border-2 border-blue-300"
/>

Preview:

Custom Style
Custom styled tooltip

Common Use Cases

Help Icons

<div className="flex items-center space-x-2">
  <span>Complex Setting</span>
  <Tooltip 
    tooltipTrigger={<span className="text-gray-400 cursor-help">?</span>}
    tooltipContent="This setting controls the advanced behavior of the feature"
  />
</div>

Button Explanations

<Tooltip 
  tooltipTrigger={<button>Delete</button>}
  tooltipContent="This action cannot be undone"
/>

Form Field Help

<div className="space-y-2">
  <label className="flex items-center space-x-2">
    <span>Password</span>
    <Tooltip 
      tooltipTrigger={<span className="text-gray-400 cursor-help">ℹ</span>}
      tooltipContent="Password must be at least 8 characters with numbers and symbols"
    />
  </label>
  <input type="password" className="border rounded px-3 py-2" />
</div>
<nav className="flex space-x-4">
  <Tooltip 
    tooltipTrigger={<a href="/dashboard">Dashboard</a>}
    tooltipContent="View your main dashboard"
  />
  <Tooltip 
    tooltipTrigger={<a href="/settings">Settings</a>}
    tooltipContent="Configure your preferences"
  />
  <Tooltip 
    tooltipTrigger={<a href="/help">Help</a>}
    tooltipContent="Get help and support"
  />
</nav>

Status Indicators

<div className="flex items-center space-x-2">
  <div className="w-3 h-3 bg-green-500 rounded-full"></div>
  <span>Online</span>
  <Tooltip 
    tooltipTrigger={<span className="text-gray-400 cursor-help">ℹ</span>}
    tooltipContent="Last seen 2 minutes ago"
  />
</div>

Best Practices

1. Clear and Concise

Keep tooltip content clear and concise.

// ✅ Good - Clear and concise
<Tooltip 
  tooltipTrigger={<button>Save</button>}
  tooltipContent="Save your changes"
/>


// ❌ Avoid - Too verbose
<Tooltip 
  tooltipTrigger={<button>Save</button>}
  tooltipContent="Click this button to save all the changes you have made to the current document or file"
/>

2. Appropriate Trigger Elements

Use appropriate elements as triggers.

// ✅ Good - Appropriate trigger
<Tooltip 
  tooltipTrigger={<span className="text-gray-400 cursor-help">?</span>}
  tooltipContent="Help text"
/>


// ✅ Good - Button with tooltip
<Tooltip 
  tooltipTrigger={<button>Action</button>}
  tooltipContent="Perform this action"
/>

3. Consistent Positioning

Use consistent positioning throughout your application.

// ✅ Good - Consistent positioning
<Tooltip 
  tooltipTrigger={<button>Button 1</button>}
  tooltipContent="Tooltip 1"
  side="top"
/>
<Tooltip 
  tooltipTrigger={<button>Button 2</button>}
  tooltipContent="Tooltip 2"
  side="top"
/>

4. Accessibility

Ensure tooltips are accessible to all users.

// ✅ Good - Accessible tooltip
<Tooltip 
  tooltipTrigger={<button aria-describedby="tooltip-1">Button</button>}
  tooltipContent="Accessible tooltip content"
/>

5. Avoid Overuse

Don't overuse tooltips - only when they add value.

// ✅ Good - Useful tooltip
<Tooltip 
  tooltipTrigger={<button>Advanced Settings</button>}
  tooltipContent="Configure advanced options"
/>


// ❌ Avoid - Unnecessary tooltip
<Tooltip 
  tooltipTrigger={<button>Save</button>}
  tooltipContent="Save"
/>

Customization

Custom Styling

You can customize the tooltip appearance using CSS classes:

<Tooltip 
  tooltipTrigger={<button>Custom</button>}
  tooltipContent="Custom styled tooltip"
  className="bg-purple-500 text-white border-2 border-purple-300 rounded-lg"
/>

Different Colors

Use different colors for different contexts:

// Success tooltip
<Tooltip 
  tooltipTrigger={<button>Success</button>}
  tooltipContent="Operation completed successfully"
  className="bg-green-500 text-white"
/>


// Warning tooltip
<Tooltip 
  tooltipTrigger={<button>Warning</button>}
  tooltipContent="Please review before proceeding"
  className="bg-yellow-500 text-white"
/>


// Error tooltip
<Tooltip 
  tooltipTrigger={<button>Error</button>}
  tooltipContent="Something went wrong"
  className="bg-red-500 text-white"
/>

Rich Content

Use rich content for more detailed tooltips:

<Tooltip 
  tooltipTrigger={<button>Rich Tooltip</button>}
  tooltipContent={
    <div className="max-w-xs">
      <h4 className="font-semibold mb-1">Feature Title</h4>
      <p className="text-sm">Detailed description of the feature and its benefits.</p>
      <div className="mt-2 text-xs text-gray-300">
        <p>• Benefit 1</p>
        <p>• Benefit 2</p>
      </div>
    </div>
  }
/>

Advanced Usage

Conditional Tooltips

Show tooltips conditionally:

const showTooltip = userLevel === 'beginner';


return (
  <Tooltip 
    tooltipTrigger={<button>Advanced Feature</button>}
    tooltipContent={showTooltip ? "This is an advanced feature" : undefined}
  />
);

Dynamic Content

Use dynamic content in tooltips:

<Tooltip 
  tooltipTrigger={<button>Status</button>}
  tooltipContent={`Last updated: ${new Date().toLocaleString()}`}
/>

Multiple Tooltips

Use multiple tooltips in a single component:

<div className="flex space-x-4">
  <Tooltip 
    tooltipTrigger={<button>Option 1</button>}
    tooltipContent="First option description"
  />
  <Tooltip 
    tooltipTrigger={<button>Option 2</button>}
    tooltipContent="Second option description"
  />
  <Tooltip 
    tooltipTrigger={<button>Option 3</button>}
    tooltipContent="Third option description"
  />
</div>
  • Popover: For more complex overlay content
  • Alert: For important messages
  • Badge: For status indicators
  • Button: For interactive elements
  • Icon: For visual indicators

API Reference

For the complete API reference and advanced usage patterns, see the Tooltip API documentation.

Edit this page on GitHub
previousToaster