Tooltip

Tooltip is a floating text that appears when a user hovers over an element

default

import Tooltip from "@/components/ui/Tooltip";
import Button from "@/components/ui/Button";

export default function Page() {
  return (
    <ToolTip trigger={<Button>Hover Me</Button>}>tooltip</ToolTip>
  )
}

placement

use side and align props to change the position of the tooltip

import Tooltip from "@/components/ui/Tooltip";
import Button from "@/components/ui/Button";

export default function Page() {
  return (
    <ToolTip side="right" align="end" trigger={<Button>Hover Me</Button>}>tooltip</ToolTip>
  )
}

offset

use sideOffset and alignOffset props to change the offset of the tooltip

import Tooltip from "@/components/ui/Tooltip";
import Button from "@/components/ui/Button";

export default function Page() {
  return (
    <ToolTip side="right" align="end" sideOffset={10} trigger={<Button>Hover Me</Button>}>tooltip</ToolTip>
  )
}

hidden arrow

import Tooltip from "@/components/ui/Tooltip";
import Button from "@/components/ui/Button";

export default function Page() {
  return (
    <ToolTip hiddenArrow trigger={<Button>Hover Me</Button>}>tooltip</ToolTip>
  )
}