> ## Documentation Index
> Fetch the complete documentation index at: https://docs.oppla.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Tooltips

> Learn how to create and customize tooltips in Oppla tours

# Tooltips

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

## Basic Usage

### Create a Tooltip

```javascript theme={null}
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

```javascript theme={null}
{
  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:

```javascript theme={null}
{
  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:

```javascript theme={null}
{
  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:

```javascript theme={null}
{
  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:

```javascript theme={null}
{
  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

<CardGroup cols={2}>
  <Card title="Modals" icon="window-maximize" href="/tours/modal">
    Learn about modal steps
  </Card>

  <Card title="Banners" icon="flag" href="/tours/banner">
    Learn about banner steps
  </Card>
</CardGroup>