da:T6815,

"use client"

import * as React from "react"
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
import { cn } from "cn"

function TooltipProvider({
  delay = 0,
  ...props
}: TooltipPrimitive.Provider.Props) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delay={delay}
      {...props}
    />
  )
}

function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
}

function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function tooltipLabels(children: React.ReactNode) {
  const nodes: React.ReactNode[] = []
  let text = ""
  React.Children.toArray(children).forEach((child, index, all) => {
    if (typeof child !== "string" && typeof child !== "number") {
      nodes.push(child)
      return
    }
    text += child
    const next = all[index + 1]
    if (typeof next === "string" || typeof next === "number") return
    if (text.trim()) {
      nodes.push(
        <span
          key={`label-${index}`}
          data-slot="tooltip-label"
          className="max-w-62"
        >
          {text}
        </span>
      )
    }
    text = ""
  })
  return nodes
}

function TooltipContent({
  className,
  side = "top",
  sideOffset = 8,
  align = "center",
  alignOffset = 0,
  children,
  ...props
}: TooltipPrimitive.Popup.Props &
  Pick<
    TooltipPrimitive.Positioner.Props,
    "align" | "alignOffset" | "side" | "sideOffset"
  >) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Positioner
        align={align}
        alignOffset={alignOffset}
        side={side}
        sideOffset={sideOffset}
        className="isolate z-50"
      >
        <TooltipPrimitive.Popup
          data-slot="tooltip-content"
          className={cn(
            "z-50 flex w-fit max-w-80 origin-(--transform-origin) items-center gap-2 rounded-md bg-foreground px-2 py-1 text-2xs text-background has-data-[slot=kbd]:pr-1 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
            className
          )}
          {...props}
        >
          {tooltipLabels(children)}
          <TooltipPrimitive.Arrow className="z-50 size-2 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-0.5 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:translate-x-[-1.5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
        </TooltipPrimitive.Popup>
      </TooltipPrimitive.Positioner>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

d7:["$","div",null,{"data-slot":"code-block-body","data-line-numbers":"","style":{"--w-line-digits":"2ch"},"className":"overflow-x-auto py-2.75 pr-12 pl-3.75 font-mono text-xs leading-6 text-w-foreground [&_pre]:m-0 [&_pre]:bg-transparent","dangerouslySetInnerHTML":{"__html":"$da"}}] db:T1e9b,

import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

const sides = [
  { side: "left", label: "Left" },
  { side: "top", label: "Top" },
  { side: "bottom", label: "Bottom" },
  { side: "right", label: "Right" },
] as const

export default function TooltipSide() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-6">
      {sides.map(({ side, label }) => (
        <Tooltip key={side}>
          <TooltipTrigger render={<Button variant="outline" />}>
            {label}
          </TooltipTrigger>
          <TooltipContent side={side}>Copy payment link</TooltipContent>
        </Tooltip>
      ))}
    </div>
  )
}

cc:["$","div",null,{"data-slot":"code-block","className":"flex flex-col","children":["$","div",null,{"data-slot":"code-block-card","className":"relative min-h-0 flex-1 overflow-hidden rounded-w-xl border border-w-border bg-w-card shadow-w-2xs","children":[["$","$Lcf",null,{"value":"import { Button } from \"@/components/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nconst sides = [\n { side: \"left\", label: \"Left\" },\n { side: \"top\", label: \"Top\" },\n { side: \"bottom\", label: \"Bottom\" },\n { side: \"right\", label: \"Right\" },\n] as const\n\nexport default function TooltipSide() {\n return (\n

\n {sides.map(({ side, label }) => (\n \n }>\n {label}\n \n Copy payment link\n \n ))}\n

\n )\n}","data-copy":"","className":"absolute top-2.25 right-2.25 z-10"}],["$","div",null,{"data-slot":"code-block-body","data-line-numbers":"","style":{"--w-line-digits":"2ch"},"className":"overflow-x-auto py-2.75 pr-12 pl-3.75 font-mono text-xs leading-6 text-w-foreground [&_pre]:m-0 [&_pre]:bg-transparent","dangerouslySetInnerHTML":{"__html":"$db"}}]]}]}] dc:T1102,

import { Button } from "@/components/ui/button"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function TooltipLongLabel() {
  return (
    <Tooltip>
      <TooltipTrigger render={<Button variant="outline" />}>
        Fraud screening
      </TooltipTrigger>
      <TooltipContent>
        Included at no additional charge for businesses on standard payments
        pricing
      </TooltipContent>
    </Tooltip>
  )
}

d3:["$","div",null,{"data-slot":"code-block","className":"flex flex-col","children":["$","div",null,{"data-slot":"code-block-card","className":"relative min-h-0 flex-1 overflow-hidden rounded-w-xl border border-w-border bg-w-card shadow-w-2xs","children":[["$","$Lcf",null,{"value":"import { Button } from \"@/components/ui/button\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\nexport default function TooltipLongLabel() {\n return (\n \n }>\n Fraud screening\n \n \n Included at no additional charge for businesses on standard payments\n pricing\n \n \n )\n}","data-copy":"","className":"absolute top-2.25 right-2.25 z-10"}],["$","div",null,{"data-slot":"code-block-body","data-line-numbers":"","style":{"--w-line-digits":"2ch"},"className":"overflow-x-auto py-2.75 pr-12 pl-3.75 font-mono text-xs leading-6 text-w-foreground [&_pre]:m-0 [&_pre]:bg-transparent","dangerouslySetInnerHTML":{"__html":"$dc"}}]]}]}]

Installation

Usage

Examples

Side

Long label

With keyboard shortcut

Ship your next project this week