🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Tooltip

A small informational overlay that appears when hovering over or focusing on an element

This is a tooltip

Installation

The Tooltip component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Tooltip component into your React component.

import { Tooltip } from 'reacui';

Basic Tooltip

A basic tooltip that appears when hovering over an element.

This is a tooltip

import { Tooltip } from 'reacui';

function Example() {
  return (
    <Tooltip content="This is a tooltip">
      <button>Hover me</button>
    </Tooltip>
  );
}

Tooltip Positions

Tooltips can be displayed in different positions relative to the target element.

Top tooltip

Right tooltip

Bottom tooltip

Left tooltip

import { Tooltip } from 'reacui';

function Example() {
  return (
    <>
      <Tooltip content="Top tooltip" placement="top">
        <button>Top</button>
      </Tooltip>
      
      <Tooltip content="Right tooltip" placement="right">
        <button>Right</button>
      </Tooltip>
      
      <Tooltip content="Bottom tooltip" placement="bottom">
        <button>Bottom</button>
      </Tooltip>
      
      <Tooltip content="Left tooltip" placement="left">
        <button>Left</button>
      </Tooltip>
    </>
  );
}

Trigger Options

Tooltips can be triggered by different interactions like hover or focus.

Hover trigger (default)

Appears on hover

Focus trigger

Appears on focus

import { Tooltip } from 'reacui';

function Example() {
  return (
    <>
      <Tooltip 
        content="Appears on hover" 
        triggerType="hover"
      >
        <button>Hover me</button>
      </Tooltip>
      
      <Tooltip 
        content="Appears on focus" 
        triggerType="focus"
      >
        <input type="text" placeholder="Focus me" />
      </Tooltip>
    </>
  );
}

Tooltip Variants

Tooltips come in different color variants to match your design needs.

Default tooltip

Primary tooltip

Success tooltip

Warning tooltip

Danger tooltip

import { Tooltip } from 'reacui';

function Example() {
  return (
    <>
      <Tooltip content="Default tooltip" variant="default">
        <button>Default</button>
      </Tooltip>
      
      <Tooltip content="Primary tooltip" variant="primary">
        <button>Primary</button>
      </Tooltip>
      
      <Tooltip content="Success tooltip" variant="success">
        <button>Success</button>
      </Tooltip>
      
      <Tooltip content="Warning tooltip" variant="warning">
        <button>Warning</button>
      </Tooltip>
      
      <Tooltip content="Danger tooltip" variant="danger">
        <button>Danger</button>
      </Tooltip>
    </>
  );
}

API Reference

The following props are available for the Tooltip component.

Prop	Type	Default	Description
children	ReactNode	required	Element that the tooltip is attached to.
content	string \| ReactNode	required	Content to display in the tooltip.
placement	string	'top'	Placement of the tooltip: 'top', 'right', 'bottom', 'left'.
triggerType	string	'hover'	Type of event that triggers the tooltip: 'hover', 'focus', 'click'.
variant	string	'default'	Color variant: 'default', 'primary', 'success', 'warning', 'danger'.
delay	number	0	Delay in milliseconds before showing the tooltip.
offset	number	8	Distance between the tooltip and the trigger element in pixels.
className	string	''	Additional CSS classes to apply to the tooltip.
isVisible	boolean	undefined	Controls visibility if you want to use the tooltip as a controlled component.
onVisibilityChange	function	undefined	Callback function when the tooltip visibility changes.