Pillar UI React Tooltip Component documentation

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:

1. Check that you have included the Tooltip component and its trigger and content elements in your application correctly.
2. Ensure that you have provided suitable content for the tooltip.
3. 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.