Tooltip

Tooltip displays informative text when users hover or focus an element.

import { Tooltip } from "rizzui";

Default

The default style of the Tooltip component.

import { Tooltip, Button } from "rizzui";

export default function App() {
  return (
    <Tooltip content={"I'm your tooltip"}>
      <Button variant="outline">Hover Me!</Button>
    </Tooltip>
  );
}

Sizes

You can change the size of Tooltip using size property.

import { Tooltip, Button } from "rizzui";

export default function App() {
  return (
    <>
      <Tooltip size="sm" content={"Small Tooltip!"}>
        <Button variant="outline">Small</Button>
      </Tooltip>
      <Tooltip content={"Default Tooltip!"}>
        <Button variant="outline">Default</Button>
      </Tooltip>
      <Tooltip size="lg" content={"Large Tooltip!"}>
        <Button variant="outline">Large</Button>
      </Tooltip>
      <Tooltip size="xl" content={"Extra Large Tooltip!"}>
        <Button variant="outline">Extra Large</Button>
      </Tooltip>
    </>
  );
}

Rounded

You can change the border radius of Tooltip using rounded property.

import { Tooltip, Button } from "rizzui";

export default function App() {
  return (
    <>
      <Tooltip rounded="none" content={"Rounded None!"}>
        <Button variant="outline">None</Button>
      </Tooltip>
      <Tooltip rounded="sm" content={"Rounded Small!"}>
        <Button variant="outline">Small</Button>
      </Tooltip>
      <Tooltip content={"Rounded Default!"}>
        <Button variant="outline">Default</Button>
      </Tooltip>
      <Tooltip rounded="lg" content={"Rounded Large!"}>
        <Button variant="outline">Large</Button>
      </Tooltip>
      <Tooltip rounded="pill" content={"Rounded Full!"}>
        <Button variant="outline">Full</Button>
      </Tooltip>
    </>
  );
}

Colors

You can change the color of Tooltip using color property.

import { Tooltip, Button } from "rizzui";

export default function App() {
  return (
    <>
      <Tooltip content={"Primary Color!"}>
        <Button variant="outline">Primary</Button>
      </Tooltip>
      <Tooltip content={"Invert Color!"} color="invert">
        <Button variant="outline" className="border-gray-900">
          Invert
        </Button>
      </Tooltip>
      <Tooltip content={"Secondary Color!"} color="secondary">
        <Button variant="outline">Secondary</Button>
      </Tooltip>
      <Tooltip content={"Danger Color!"} color="danger">
        <Button variant="outline">Danger</Button>
      </Tooltip>
      <Tooltip content={"Info Color!"} color="info">
        <Button variant="outline">Info</Button>
      </Tooltip>
      <Tooltip content={"Success Color!"} color="success">
        <Button variant="outline">Success</Button>
      </Tooltip>
      <Tooltip content={"Warning Color!"} color="warning">
        <Button variant="outline">Warning</Button>
      </Tooltip>
    </>
  );
}

Shadows

You can change the shadow style of Tooltip using shadow property.

import { Tooltip, Button } from "rizzui";

export default function App() {
  return (
    <>
      <Tooltip shadow="sm" content={"Small Shadow!"}>
        <Button variant="outline">Small</Button>
      </Tooltip>
      <Tooltip content={"Default Shadow!"}>
        <Button variant="outline">Default</Button>
      </Tooltip>
      <Tooltip shadow="lg" content={"Large Shadow!"}>
        <Button variant="outline">Large</Button>
      </Tooltip>
      <Tooltip shadow="xl" content={"Extra Large Shadow!"}>
        <Button variant="outline">Extra Large</Button>
      </Tooltip>
    </>
  );
}

With Custom Content

You can use custom content inside Tooltip

import { Tooltip, Text, Button } from "rizzui";
import { InformationCircleIcon } from "@heroicons/react/24/solid";

function CustomContent() {
  return (
    <div className="w-40 text-start">
      <div className="inline-flex items-center gap-2 text-base mb-1.5">
        <InformationCircleIcon className="w-5 h-5" />
        <Text fontWeight="medium">Tooltip Title</Text>
      </div>
      <Text className="text-sm text-gray-600">
        This is a tip to help you accomplish a task.
      </Text>
    </div>
  );
}

export default function App() {
  return (
    <Tooltip content={<CustomContent />} placement="bottom-start">
      <Button variant="outline">Custom Content</Button>
    </Tooltip>
  );
}

With Placements

You can change placement of the Tooltip using property placement.

import { Tooltip, Button } from "rizzui";

export default function App() {
  return (
    <div className="flex h-[560px] flex-col">
      <div className="relative m-auto flex h-96 max-w-xl w-full flex-wrap justify-center gap-8">
        <Tooltip content={"Left"} placement="left">
          <Button variant="outline" className="absolute top-1/2 left-0">
            L
          </Button>
        </Tooltip>
        <Tooltip content={"Right"} placement="right">
          <Button variant="outline" className="absolute top-1/2 right-0">
            R
          </Button>
        </Tooltip>
        <Tooltip content={"Top"} placement="top">
          <Button variant="outline" className="absolute top-0">
            T
          </Button>
        </Tooltip>
        <Tooltip content={"Bottom"} placement="bottom">
          <Button variant="outline" className="absolute -bottom-5">
            B
          </Button>
        </Tooltip>
        <Tooltip content={"Top Start"} placement="top-start">
          <Button
            variant="outline"
            className="absolute left-10 xl:left-20 top-0"
          >
            TS
          </Button>
        </Tooltip>
        <Tooltip content={"Top End"} placement="top-end">
          <Button
            variant="outline"
            className="absolute top-0 right-10 xl:right-20"
          >
            TE
          </Button>
        </Tooltip>
        <Tooltip content={"Bottom Start"} placement="bottom-start">
          <Button
            variant="outline"
            className="absolute -bottom-5 left-10 xl:left-20"
          >
            BS
          </Button>
        </Tooltip>
        <Tooltip content={"Bottom End"} placement="bottom-end">
          <Button
            variant="outline"
            className="absolute -bottom-5 right-10 xl:right-20"
          >
            BE
          </Button>
        </Tooltip>
        <Tooltip content={"Left Start"} placement="left-start">
          <Button variant="outline" className="absolute left-8 top-24">
            LS
          </Button>
        </Tooltip>
        <Tooltip content={"Left End"} placement="left-end">
          <Button variant="outline" className="absolute bottom-16 left-8">
            LE
          </Button>
        </Tooltip>
        <Tooltip content={"Right Start"} placement="right-start">
          <Button variant="outline" className="absolute right-8 top-24">
            RS
          </Button>
        </Tooltip>
        <Tooltip content={"Right End"} placement="right-end">
          <Button variant="outline" className="absolute right-8 bottom-16">
            RE
          </Button>
        </Tooltip>
      </div>
    </div>
  );
}

API Reference

---

Tooltip Props

Here is the API documentation of the Tooltip component. You can use the following props to create a demo of tooltip.

Props	Type	Description	Default
content	ReactNode	Content for tooltip	__
placement	TooltipPlacements	Supported Tooltip Placements are:	bottom
children	TooltipChildren	Pass children which will have tooltip	__
color	TooltipColors	Change Tooltip color	"primary"
size	TooltipSizes	Supported Tooltip sizes are:	"md"
rounded	TooltipRounded	The rounded variants are:	"md"
shadow	TooltipShadows	Supported tooltip shadows are:	"md"
className	string	Add custom classes to the tooltip container	__
showArrow	boolean	Whether tooltip arrow should be shown or hidden	true
arrowClassName	string	Add custom classes to the tooltip arrow	__

Tooltip Placements

type TooltipPlacements =
  | "left"
  | "right"
  | "top"
  | "bottom"
  | "left-start"
  | "left-end"
  | "right-start"
  | "right-end";

Tooltip Children

type TooltipChildren = Element & { ref?: RefObject<any> | undefined };

Tooltip Colors

type TooltipColors =
  | "primary"
  | "invert"
  | "secondary"
  | "danger"
  | "info"
  | "success"
  | "warning"
  | "invert";

Tooltip Sizes

type TooltipSizes = "sm" | "md" | "lg" | "xl";

Tooltip Rounded

type TooltipRounded = "sm" | "md" | "lg" | "none" | "pill";

Tooltip Shadows

type TooltipShadows = "sm" | "md" | "lg" | "xl";