Skip to content

Latest commit

 

History

History
153 lines (129 loc) · 3.72 KB

tooltip.mdx

File metadata and controls

153 lines (129 loc) · 3.72 KB
Raw

import { ComponentLinks, InteractiveCodeblock, PropsTable, Codeblock, } from "@/components/index";

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,
  TooltipPrefix,
  TooltipSuffix,
  TooltipWrapper,
} from "@adaptui/react-tailwind";

<Nextra.Callout> A complex component that supports customization as per the composition guide. </Nextra.Callout>

Usage

<InteractiveCodeblock children={({ spreadProps }) => <Tooltip content="Add your information" ${spreadProps}> <TooltipWrapper className="z-50" /> <Button>Tooltip</Button> </Tooltip>} booleanProps={["withArrow"]} choiceProps={{ placement: ["'top'", "'right'", "'bottom'", "'left'"] }} />

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.

import { Tooltip, TooltipWrapper } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="inline-flex flex-row space-x-2">
      <Tooltip content="Add your information" placement="top">
        <TooltipWrapper className="z-50" />
        <Button>Tooltip</Button>
      </Tooltip>
      <Tooltip content="Add your information" placement="bottom">
        <TooltipWrapper className="z-50" />
        <Button>Tooltip</Button>
      </Tooltip>
      <Tooltip content="Add your information" placement="left">
        <TooltipWrapper className="z-50" />
        <Button>Tooltip</Button>
      </Tooltip>
      <Tooltip content="Add your information" placement="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.

import { Tooltip, TooltipWrapper } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <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

<PropsTable data={[ { name: "withArrow", type: "boolean", description: "If true, Tooltip will render an arrow.", default: "false", }, { name: "content", type: "React.ReactNode", description: "Label for the Tooltip.", }, { name: "prefix", type: "React.ReactNode", description: "Prefix for the Tooltip", }, { name: "suffix", type: "React.ReactNode", description: "Suffix for the Tooltip", }, { name: "arrowIcon", type: "React.ReactNode", description: "Provide custom arrow icon as a replacement for the default one.", },

]} />