DaisyUI Tooltip

Buttons

About

Tooltip can be used to show a message when hovering over an element.

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

Code

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

Usage.tsx

import TooltipDaisyUI, { TooltipContentDaisyUI } from "@/components/ui/daisy-ui-tooltip";

const classDiv = "flex card bg-base-300 w-full h-35 justify-center items-center";

export default function DemoOne() {
  return (
    <div className="flex flex-col gap-4">

      <h2 className="text-xl">Tooltip</h2>
      <div className={classDiv}>
        <TooltipDaisyUI data-tip="hello">
          <button className="btn">Hover me</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Tooltip with tooltip-content</h2>      
      <div className={classDiv}>
        <TooltipDaisyUI>
          <TooltipContentDaisyUI>
            <div className="animate-bounce text-orange-400 -rotate-10 text-2xl font-black">Wow!</div>
          </TooltipContentDaisyUI>
          <button className="btn">Hover me</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Force open</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" data-tip="hello">
          <button className="btn">Force open</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Top</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" placement="top" data-tip="hello">
          <button className="btn">Top</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Bottom</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" placement="bottom" data-tip="hello">
          <button className="btn">Bottom</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Left</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" placement="left" data-tip="hello">
          <button className="btn">Left</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Right</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" placement="right" data-tip="hello">
          <button className="btn">Right</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Neutral color</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" color="neutral" data-tip="neutral">
          <button className="btn btn-neutral">neutral</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Primary color</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" color="primary" data-tip="primary">
          <button className="btn btn-primary">primary</button>
        </TooltipDaisyUI>
      </div>
      <h2 className="text-xl">Secondary color</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" color="secondary" data-tip="secondary">
          <button className="btn btn-secondary">secondary</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Accent color</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" color="accent" data-tip="accent">
          <button className="btn btn-accent">accent</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Info color</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" color="info" data-tip="info">
          <button className="btn btn-info">info</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Success color</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" color="success" data-tip="success">
          <button className="btn btn-success">success</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Warning color</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" color="warning" data-tip="warning">
          <button className="btn btn-warning">warning</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Error color</h2>
      <div className={classDiv}>
        <TooltipDaisyUI modifier="open" color="error" data-tip="error">
          <button className="btn btn-error">error</button>
        </TooltipDaisyUI>
      </div>

      <h2 className="text-xl">Responsive tooltip. only show for large screen</h2>
      <div className={classDiv}>
        <TooltipDaisyUI className="lg:tooltip" data-tip="hello">
          <button className="btn">Hover me</button>
        </TooltipDaisyUI>
      </div>
    </div>);
}