---
sidebar_position: 30
---

import { Tooltip, Text, Button } from "rizzui";
import { InformationCircleIcon } from "@heroicons/react/24/solid";
import Paper from "@site/src/components/paper";

# Tooltip

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

```jsx
"use client"; 

import { Tooltip } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of the **Tooltip** component.

<Paper>
  <Tooltip content={"I'm your tooltip"}>
    <Button variant="outline">Hover Me!</Button>
  </Tooltip>
</Paper>

```tsx
"use client"; 

import { Tooltip, Button } from "rizzui";

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

<div className="mb-16" />

## Sizes

You can change the size of **Tooltip** using [**size**](#tooltip-sizes) property.

<Paper className="flex-row flex-wrap justify-around gap-4">
  <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>
</Paper>

```tsx
"use client"; 

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>
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the border radius of **Tooltip** using [**rounded**](#tooltip-rounded) property.

<Paper className="flex-row flex-wrap justify-around gap-4">
  <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>
</Paper>

```tsx
"use client"; 

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>
    </>
  );
}
```

<div className="mb-16" />

## Colors

You can change the color of **Tooltip** using [**color**](#tooltip-colors) property.

<Paper className="flex-row flex-wrap justify-around gap-4">
  <Tooltip content={"Primary Color!"}>
    <Button variant="outline">Primary</Button>
  </Tooltip>
  <Tooltip content={"Invert Color!"} color="invert">
    <Button variant="outline">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>
</Paper>

```tsx
"use client"; 

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>
    </>
  );
}
```

<div className="mb-16" />

## Shadows

You can change the shadow style of **Tooltip** using [**shadow**](#tooltip-shadows) property.

<Paper className="flex-row flex-wrap justify-around gap-4">
  <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>
</Paper>

```tsx
"use client"; 

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>
    </>
  );
}
```

<div className="mb-16" />

## With Custom Content

You can use custom content inside **Tooltip**

<Paper>
  <Tooltip
    content={
      <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-200">
          This is a tip to help you accomplish a task.
        </Text>
      </div>
    }
    placement="bottom-start"
  >
    <Button variant="outline">Custom Content</Button>
  </Tooltip>
</Paper>

```tsx
"use client"; 

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>
  );
}
```

<div className="mb-16" />

## With Placements

You can change placement of the **Tooltip** using property [**placement**](#tooltip-placements).

<Paper className="h-[560px]">
  <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>
</Paper>

```tsx
"use client"; 

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>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Tooltip Props

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

<div className="overflow-x-auto">

|     Props      |                   Type                   |                   Description                   |   Default   |
| :------------: | :--------------------------------------: | :---------------------------------------------: | :---------: |
|    content     |               `ReactNode`                |               Content for tooltip               |    \_\_     |
|   placement    | [TooltipPlacements](#tooltip-placements) |        Supported Tooltip Placements are:        |  `bottom`   |
|    children    |   [TooltipChildren](#tooltip-children)   |      Pass children which will have tooltip      |    \_\_     |
|     color      |     [TooltipColors](#tooltip-colors)     |              Change Tooltip color               | `"primary"` |
|      size      |      [TooltipSizes](#tooltip-sizes)      |          Supported Tooltip sizes are:           |   `"md"`    |
|    rounded     |    [TooltipRounded](#tooltip-rounded)    |            The rounded variants are:            |   `"md"`    |
|     shadow     |    [TooltipShadows](#tooltip-shadows)    |         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     |    \_\_     |

</div>

<div className="mb-10" />

### Tooltip Placements

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

<div className="mb-10" />

### Tooltip Children

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

<div className="mb-10" />

### Tooltip Colors

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

<div className="mb-10" />

### Tooltip Sizes

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

<div className="mb-10" />

### Tooltip Rounded

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

<div className="mb-10" />

### Tooltip Shadows

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