Tooltips
Learn how to create and customize tooltips to highlight specific elements in your application.
Basic Usage
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();
{
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
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
}
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
- Be Concise: Keep tooltip content short and clear
- Be Specific: Target elements precisely
- Be Consistent: Use consistent styling and placement
- Be Accessible: Ensure tooltips are keyboard accessible
Common Issues
- 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
