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.

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

💡

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

Usage


  <Tooltip content="Add your information" >
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>


  <Tooltip content="Add your information" >
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>

WithArrow

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.

<div className="inline-flex flex-row space-x-2">
  <Tooltip content="Add your information" side="top">
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
  <Tooltip content="Add your information" side="bottom">
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
  <Tooltip content="Add your information" side="left">
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
  <Tooltip content="Add your information" side="right">
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
</div>

<div className="inline-flex flex-row space-x-2">
  <Tooltip content="Add your information" side="top">
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
  <Tooltip content="Add your information" side="bottom">
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
  <Tooltip content="Add your information" side="left">
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
  <Tooltip content="Add your information" side="right">
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
</div>

Tooltip Prefix/Suffix

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

<div className="inline-flex flex-row space-x-2">
  <Tooltip content="Add your information" prefix={<SlotIcon />}>
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
  <Tooltip content="Add your information" suffix={<SlotIcon />}>
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
  <Tooltip content="Add your information" prefix={<SlotIcon />} suffix={<SlotIcon />}>
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
</div>

<div className="inline-flex flex-row space-x-2">
  <Tooltip content="Add your information" prefix={<SlotIcon />}>
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
  <Tooltip content="Add your information" suffix={<SlotIcon />}>
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
  <Tooltip content="Add your information" prefix={<SlotIcon />} suffix={<SlotIcon />}>
    <TooltipWrapper className="z-50" />
    <Button>Tooltip</Button>
  </Tooltip>
</div>

API Reference

Prop	Type	Default
`withArrow`	`boolean`	`false`
`content`	`React.ReactNode`	-
`prefix`	`React.ReactNode`	-
`suffix`	`React.ReactNode`	-
`arrowIcon`	`React.ReactNode`	-

Last updated on June 8, 2023

Tooltip

Imports#

Usage#

Tooltip Sides#

Tooltip Prefix/Suffix#

API Reference#

Imports

Usage

Tooltip Sides

Tooltip Prefix/Suffix

API Reference