Tooltip

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

'use client';

import { Tooltip } from 'rizzui/tooltip';

Default

The default style of the Tooltip component.

'use client';

import { Tooltip } from 'rizzui/tooltip';
import { Button } from 'rizzui/button';

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.

'use client';

import { Tooltip } from 'rizzui/tooltip';
import { Button } from 'rizzui/button';

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

Colors

You can change the color of Tooltip using color property.

'use client';

import { Tooltip } from 'rizzui/tooltip';
import { Button } from 'rizzui/button';

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

With Custom Content

You can use custom content inside Tooltip

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

With Placements

You can change placement of the Tooltip using property placement.

'use client';

import { Tooltip } from 'rizzui/tooltip';
import { Button } from 'rizzui/button';

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"
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';

Tooltip Shadows

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