Tooltip

import { Tooltip } from "@/ui/tooltip";
import { Avatar } from "@/ui/avatar";

export function TooltipDemo() {
  return (
    <Tooltip
      asChild
      side="top"
      content={<span>Brian and Brothers</span>}
      contentProps={{ className: "block" }}
      >
      <Avatar fallback="Brian and Brothers" src="https://api.dicebear.com/9.x/adventurer-neutral/svg?seed=Brian" />
    </Tooltip>
  );
}

import { Tooltip } from "@/ui/tooltip";

function Inline({ label }: { label: string }) {
  return (
    <Tooltip
      touch
      asChild
      side="top"
      content={`What's ${label}?`}
      className="[@media_not_all_and_(hover:hover)]:select-none"
      contentProps={{
        className: "bg-color text-background [&_[data-tooltip]]:text-color font-medium"
      }}
    >
      <mark>{label}</mark>
    </Tooltip>
  );
}

export function TooltipInlineDemo() {
  return (
    <div className="m-auto size-full max-w-lg p-6">
      <p className="w-full max-w-full text-justify text-sm">
        In the world of modern <Inline label="technology" />, staying updated is no longer optional—it’s a necessity. Innovations in <Inline label="artificial intelligence" /> have reshaped how we interact with systems, enabling a more personalized and efficient experience. Yet, with rapid advancements come challenges. Developers must navigate the complexities of <Inline label="scalability" />, ensuring applications grow seamlessly without compromising performance. Similarly, the rise of <Inline label="cybersecurity" /> concerns has pushed teams to prioritize safeguarding user data while maintaining accessibility. Every step forward in this digital age is an opportunity to create impactful solutions, but it also demands a commitment to learning, adapting, and overcoming.
      </p>
    </div>
  );
}