​
Tooltips

Learn how to create and customize tooltips to highlight specific elements in your application.

​
Basic Usage

​
Create a Tooltip

import { createTour } from '@oppla-ai/tours';

const tour = createTour({
  id: 'feature-tour',
  steps: [
    {
      type: 'tooltip',
      target: '#feature-button',
      content: 'Click here to access this feature'
    }
  ]
});

tour.start();

​
Tooltip with Options

{
  type: 'tooltip',
  target: '#feature-button',
  content: 'Click here to access this feature',
  placement: 'right',
  arrow: true,
  offset: 10,
  delay: 0
}

​
Customization

​
Styling

Customize tooltip appearance: 
{
  type: 'tooltip',
  target: '#feature-button',
  content: 'Click here to access this feature',
  style: {
    backgroundColor: '#ffffff',
    color: '#000000',
    borderRadius: '4px',
    padding: '12px',
    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
  }
}

​
Positioning

Control tooltip placement: 
{
  type: 'tooltip',
  target: '#feature-button',
  content: 'Click here to access this feature',
  placement: 'right', // 'top', 'right', 'bottom', 'left'
  arrow: true,
  offset: 10,
  container: '#tooltip-container' // Optional container element
}

​
Advanced Features

​
Interactive Tooltips

Add interactive elements to tooltips: 
{
  type: 'tooltip',
  target: '#feature-button',
  content: `
    <div>
      <h3>New Feature</h3>
      <p>Click here to access this feature</p>
      <button onclick="handleClick()">Learn More</button>
    </div>
  `,
  allowHTML: true
}

​
Conditional Tooltips

Show tooltips based on conditions: 
{
  type: 'tooltip',
  target: '#feature-button',
  content: 'Click here to access this feature',
  showIf: {
    type: 'user-property',
    property: 'plan',
    value: 'premium'
  }
}

​
Best Practices

  1. Be Concise: Keep tooltip content short and clear
  2. Be Specific: Target elements precisely
  3. Be Consistent: Use consistent styling and placement
  4. Be Accessible: Ensure tooltips are keyboard accessible

​
Common Issues

​
Tooltip Not Showing

  • Check target element exists
  • Verify target selector is correct
  • Check for z-index conflicts
  • Ensure proper initialization

​
Positioning Issues

  • Check container boundaries
  • Verify placement options
  • Check for overflow issues
  • Ensure proper offset values

​
Next Steps

Modals

Learn about modal steps

Banners

Learn about banner steps