Pillar UI React Tooltip Component documentation
The Tooltip component provides a simple way to display additional information when users interact with specific elements, such as buttons or links, by showing a tooltip.
Components:
Type
import
import { Pillar UI React Tooltip Component } from '@pillar-ui/core'
Overview
The Tooltip component is designed to enhance user experience by displaying additional information or context when users interact with certain elements, such as buttons or links. It creates a small pop-up box (tooltip) with content that appears when a trigger element is hovered over, clicked, or focused.
Tooltip Example
import Tooltip from 'your-tooltip-library'
function App() {
return (
<div>
<Tooltip.Trigger>
<button>Hover me</button>
</Tooltip.Trigger>
<Tooltip.Content>This is a tooltip!</Tooltip.Content>
</div>
)
}
export default App
Tooltip Components
The Tooltip component consists of two main parts: the Trigger and the Content.
Tooltip.Trigger
The Tooltip.Trigger
component represents the element that triggers the tooltip to be displayed. It can be any HTML element, such as a button or a link.
Example Usage
<Tooltip.Trigger>
<button>Hover me</button>
</Tooltip.Trigger>
Tooltip.Content
The Tooltip.Content
component contains the content that will be displayed inside the tooltip when the trigger element is interacted with.
Example Usage
<Tooltip.Content>This is a tooltip!</Tooltip.Content>
Props
Tooltip
The Tooltip
component accepts the following props:
position
The position where the tooltip will appear in relation to the trigger element.
- Type: string
- Default:
top
- Options:
top
|bottom
|left
|right
Example Usage:
<Tooltip position="bottom">
<Tooltip.Trigger>
<button>Hover me</button>
</Tooltip.Trigger>
<Tooltip.Content>This is a tooltip at the bottom.</Tooltip.Content>
</Tooltip>
align
The alignment of the tooltip within its position.
- Type: string
- Default:
center
- Options:
start
|end
|center
Example Usage:
<Tooltip align="start">
<Tooltip.Trigger>
<button>Hover me</button>
</Tooltip.Trigger>
<Tooltip.Content>This is a tooltip aligned to the start.</Tooltip.Content>
</Tooltip>
delay
The delay in milliseconds before the tooltip appears after interacting with the trigger element.
- Type: number
- Default:
200
Example Usage:
Example Usage:
<Tooltip delay={300}>
<Tooltip.Trigger>
<button>Hover me</button>
</Tooltip.Trigger>
<Tooltip.Content>This is a tooltip with a delay of 300ms.</Tooltip.Content>
</Tooltip>
Tooltip.Content
The Tooltip.Content
component accepts the following prop:
-
duration
(number, default: 200): The duration in milliseconds for the tooltip to remain visible after the trigger element is no longer interacted with.Example Usage:
<Tooltip.Content duration={500}>This is a tooltip that stays visible for 500ms after interaction.</Tooltip.Content>
Accessibility
To ensure accessibility, make sure to provide meaningful content and appropriate ARIA attributes for screen readers.
Use Cases
Tooltip components are commonly used in user interfaces to provide context or additional information when users interact with specific elements. Some common use cases include:
- Providing hints and explanations for form fields.
- Displaying additional information about icons or buttons.
- Guiding users through complex UI elements.
Troubleshooting
If you encounter any issues with the Tooltip component not functioning as expected, consider the following troubleshooting steps:
- Check that you have included the Tooltip component and its trigger and content elements in your application correctly.
- Ensure that you have provided suitable content for the tooltip.
- Verify that any custom styling or CSS does not interfere with the tooltip's visibility or positioning.
For further assistance, refer to the documentation or seek help from the library's community.