Tooltip

"use client";

import * as Tooltip from "@lora-ui/tooltip";

export default function Uncontrolled() {
  function onOpenChange(open) {
    console.log(open);
  }
  return (
    <Tooltip.Root
      placement="right"
      offset={8}
      onOpenChange={onOpenChange}
      defaultOpen={false}
    >
      <Tooltip.Trigger className="box-border flex items-center whitespace-nowrap rounded-lg border border-[#7f56d9] bg-[#7f56d9] px-3 py-2 text-sm font-semibold text-[#ffffff] outline-offset-4 hover:bg-[#6941c6] focus:outline-offset-2 disabled:pointer-events-none disabled:border-[#d0d5dd] disabled:bg-[#f2f4f7] disabled:text-[#667085] dark:border-[#9e77ed] dark:bg-[#7f56d9] dark:text-[#f5f5f6] dark:hover:bg-[#9e77ed] dark:disabled:border-[#333741] dark:disabled:bg-[#1f242f] dark:disabled:text-[#85888e]">
        Information
      </Tooltip.Trigger>
      <Tooltip.Content
        arrow
        arrowClassName="fill-[#ffffff] dark:fill-[#0c111d] drop-shadow-sm"
        className="rounded-lg bg-white px-3 py-2 text-lg font-semibold text-[#344054] drop-shadow-lg dark:bg-[#101828] dark:text-white"
      >
        This is a tooltip
      </Tooltip.Content>
    </Tooltip.Root>
  );
}

"use client";

import React from "react";
import * as Tooltip from "@lora-ui/tooltip";

export default function Controlled() {
  const [open, setOpen] = React.useState(false);

  function onOpenChange(open) {
    setOpen(!open);
  }

  return (
    <Tooltip.Root
      open={open}
      onOpenChange={onOpenChange}
      placement="bottom"
      offset={8}
    >
      <Tooltip.Trigger className="box-border flex items-center whitespace-nowrap rounded-lg border border-[#7f56d9] bg-[#7f56d9] px-3 py-2 text-sm font-semibold text-[#ffffff] outline-offset-4 hover:bg-[#6941c6] dark:border-[#9e77ed] dark:bg-[#7f56d9] dark:text-[#f5f5f6] dark:hover:bg-[#9e77ed]">
        Information
      </Tooltip.Trigger>
      <Tooltip.Content
        arrow
        arrowClassName="fill-[#ffffff] dark:fill-[#0c111d] drop-shadow-sm"
        className="rounded-lg bg-white px-3 py-2 text-lg font-semibold text-[#344054] drop-shadow-lg dark:bg-[#101828] dark:text-white"
      >
        This is a tooltip
      </Tooltip.Content>
    </Tooltip.Root>
  );
}