Tooltip

Component 29

About

A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tooltip to your project and fits it to your theme.

Code

How Tooltip is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from "react";
import { Tooltip } from "@/components/ui/tooltip";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Spinner } from "@/components/ui/spinner";

export const Default = () => (
  <div className="flex flex-col gap-2 px-96 w-full">
    <div className="font-bold text-xl dark:text-white">Default</div>
    <div className="flex justify-between gap-4">
      <Tooltip text="The Evil Rabbit Jumped over the Fence">
        <span className="dark:text-white">Top</span>
      </Tooltip>
      <Tooltip position="bottom" text="The Evil Rabbit Jumped over the Fence">
        <span className="dark:text-white">Bottom</span>
      </Tooltip>
      <Tooltip position="left" text="The Evil Rabbit Jumped over the Fence">
        <span className="dark:text-white">Left</span>
      </Tooltip>
      <Tooltip position="right" text="The Evil Rabbit Jumped over the Fence">
        <span className="dark:text-white">Right</span>
      </Tooltip>
    </div>
  </div>
)

export const NoDelay = () => (
  <div className="flex flex-col gap-2 px-96 w-full">
    <div className="font-bold text-xl dark:text-white">No delay</div>
    <div className="flex justify-between gap-4">
      <Tooltip text="The Evil Rabbit Jumped over the Fence" delay={false}>
        <span className="dark:text-white">Top</span>
      </Tooltip>
      <Tooltip position="bottom" text="The Evil Rabbit Jumped over the Fence" delay={false}>
        <span className="dark:text-white">Bottom</span>
      </Tooltip>
      <Tooltip position="left" text="The Evil Rabbit Jumped over the Fence" delay={false}>
        <span className="dark:text-white">Left</span>
      </Tooltip>
      <Tooltip position="right" text="The Evil Rabbit Jumped over the Fence" delay={false}>
        <span className="dark:text-white">Right</span>
      </Tooltip>
    </div>
  </div>
)

export const BoxAlign = () => (
  <div className="flex flex-col gap-2 px-96 w-full">
    <div className="font-bold text-xl dark:text-white">Box align</div>
    <div className="flex justify-between gap-4">
      <div className="text-center">
        <Tooltip position="bottom" boxAlign="left" text="The Evil Rabbit Jumped over the Fence">
          <span className="dark:text-white">Bottom/Left</span>
        </Tooltip>
        <Tooltip position="left" boxAlign="left" text="The Evil Rabbit Jumped over the Fence">
          <span className="dark:text-white">Left/Left</span>
        </Tooltip>
        <Tooltip position="right" boxAlign="left" text="The Evil Rabbit Jumped over the Fence">
          <span className="dark:text-white">Right/Left</span>
        </Tooltip>
      </div>
      <div className="text-center">
        <Tooltip position="bottom" boxAlign="center" text="The Evil Rabbit Jumped over the Fence">
          <span className="dark:text-white">Bottom/Center</span>
        </Tooltip>
        <Tooltip position="left" boxAlign="center" text="The Evil Rabbit Jumped over the Fence">
          <span className="dark:text-white">Left/Center</span>
        </Tooltip>
        <Tooltip position="right" boxAlign="center" text="The Evil Rabbit Jumped over the Fence">
          <span className="dark:text-white">Right/Center</span>
        </Tooltip>
      </div>
      <div className="text-center">
        <Tooltip position="bottom" boxAlign="right" text="The Evil Rabbit Jumped over the Fence">
          <span className="dark:text-white">Bottom/Right</span>
        </Tooltip>
        <Tooltip position="left" boxAlign="right" text="The Evil Rabbit Jumped over the Fence">
          <span className="dark:text-white">Left/Right</span>
        </Tooltip>
        <Tooltip position="right" boxAlign="right" text="The Evil Rabbit Jumped over the Fence">
          <span className="dark:text-white">Right/Right</span>
        </Tooltip>
      </div>
    </div>
  </div>
)

export const CustomContent = () => (
  <div className="flex flex-col gap-2 px-96 w-full">
    <div className="font-bold text-xl dark:text-white">Custom content</div>
    <div className="flex justify-between gap-4">
      <Tooltip
        text={
          <>
            The <b>Evil Rabbit</b> Jumped over the <i>Fence</i>.
          </>
        }
      >
        <span className="dark:text-white">Top</span>
      </Tooltip>
      <Tooltip
        position="bottom"
        text={
          <>
            The <b>Evil Rabbit</b> Jumped over the <i>Fence</i>.
          </>
        }
      >
        <span className="dark:text-white">Bottom</span>
      </Tooltip>
      <Tooltip
        position="left"
        text={
          <>
            The <b>Evil Rabbit</b> Jumped over the <i>Fence</i>.
          </>
        }
      >
        <span className="dark:text-white">Left</span>
      </Tooltip>
      <Tooltip
        position="right"
        text={
          <>
            The <b>Evil Rabbit</b> Jumped over the <i>Fence</i>.
          </>
        }
      >
        <span className="dark:text-white">Right</span>
      </Tooltip>
    </div>
  </div>
)

export const CustomType = () => (
  <div className="flex flex-col gap-2 px-96 w-full">
    <div className="font-bold text-xl dark:text-white">Custom type</div>
    <div className="flex justify-between gap-4">
      <Tooltip type="success" text="The Evil Rabbit Jumped over the Fence">
        <span className="dark:text-white">Top</span>
      </Tooltip>
      <Tooltip position="bottom" type="error" text="The Evil Rabbit Jumped over the Fence">
        <span className="dark:text-white">Bottom</span>
      </Tooltip>
      <Tooltip position="left" type="warning" text="The Evil Rabbit Jumped over the Fence">
        <span className="dark:text-white">Left</span>
      </Tooltip>
      <Tooltip position="right" type="violet" text="The Evil Rabbit Jumped over the Fence">
        <span className="dark:text-white">Right</span>
      </Tooltip>
    </div>
  </div>
)

export const Components = () => (
  <div className="flex flex-col gap-2 px-96 w-full">
    <div className="font-bold text-xl dark:text-white">Components</div>
    <div className="flex justify-between items-center gap-4">
      <Tooltip position="bottom" text="The Evil Rabbit Jumped over the Fence">
        <Button size="small">Bottom</Button>
      </Tooltip>
      <Tooltip position="left" text="The Evil Rabbit Jumped over the Fence">
        <Badge size="sm">LEFT</Badge>
      </Tooltip>
      <Tooltip position="right" text="The Evil Rabbit Jumped over the Fence">
        <Spinner />
      </Tooltip>
    </div>
  </div>
)

export const Other = () => (
  <div className="flex flex-col gap-2 px-96 w-full">
    <div className="font-bold text-xl dark:text-white">Other</div>
    <div className="flex justify-between gap-4">
      <Tooltip text="The Evil Rabbit Jumped over the Fence" tip={false}>
        <span className="dark:text-white">No tip indicator</span>
      </Tooltip>
      <Tooltip text="The Evil Rabbit Jumped over the Fence" center={false}>
        <span className="dark:text-white">No center text</span>
      </Tooltip>
    </div>
  </div>
)