Skip to content
Docs
Components
Popups
Tooltip

Tooltip

Tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. Tooltip can be used in combination with other components, such as Button or Icon. Tooltip composes reakit's Tooltip component.

Imports

import {
  Tooltip,
  TooltipAnchor,
  TooltipArrow,
  TooltipArrowContent,
  TooltipContent,
  useTooltipProps,
  TooltipReference,
  useTooltipState,
  TooltipTrigger,
  TooltipWrapper,
} from "@renderlesskit/react-tailwind";
💡

A complex component that supports customization as per the composition guide.

Usage

Tooltip Sides

Sides can be set by passing the side prop to the Tooltip component. 4 side options are available: top, right, bottom, left.By default, the tooltip is displayed from the bottom.

withArrow prop is used to toggle the arrow.

Tooltip Prefix/Suffix

You can pass prefix and suffix props to append or prepend any content inside of button.

API Reference

Prop

Type

Default

withArrowbooleanfalse
contentReact.ReactNode-
prefixReact.ReactNode-
suffixReact.ReactNode-
arrowIconReact.ReactNode-