Zaidan

Command Palette

Search for a command to run...

GitHub69

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Installation

CLI

Manual

Install the following dependencies:

Copy and paste the following code into your project.

import type { PolymorphicProps } from "@kobalte/core/polymorphic";
import * as TooltipPrimitive from "@kobalte/core/tooltip";
import type { ComponentProps, ValidComponent } from "solid-js";
import { mergeProps, splitProps } from "solid-js";
import { cn } from "~/lib/utils";


const Tooltip = (props: TooltipPrimitive.TooltipRootProps) => {
  const mergedProps = mergeProps(
    {
      openDelay: 0,
      placement: "top",
    } as TooltipPrimitive.TooltipRootProps,
    props,
  );
  return <TooltipPrimitive.Root data-slot="tooltip" {...mergedProps} />;
};


type TooltipTriggerProps<T extends ValidComponent = "button"> = PolymorphicProps<
  T,
  TooltipPrimitive.TooltipTriggerProps<T>
>;


const TooltipTrigger = <T extends ValidComponent = "button">(props: TooltipTriggerProps<T>) => (
  <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
);


type TooltipContentProps<T extends ValidComponent = "div"> = PolymorphicProps<
  T,
  TooltipPrimitive.TooltipContentProps<T>
> &
  Pick<ComponentProps<T>, "class" | "children">;


const TooltipContent = <T extends ValidComponent = "div">(props: TooltipContentProps<T>) => {
  const [local, others] = splitProps(props as TooltipContentProps, ["class", "children"]);
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        class={cn(
          "z-50 z-tooltip-content w-fit max-w-xs origin-(--kb-tooltip-content-transform-origin) bg-foreground text-background",
          local.class,
        )}
        {...others}
      >
        {local.children}
        <TooltipPrimitive.Arrow size={19} />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  );
};


export { Tooltip, TooltipTrigger, TooltipContent };

Examples

Here are the source code of all the examples from the preview page:

Basic

import { Button } from "~/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
function TooltipBasic() {
  return (
    <Example title="Basic">
      <Tooltip>
        <TooltipTrigger as={Button} variant="outline" class="w-fit">
          Show Tooltip
        </TooltipTrigger>
        <TooltipContent>
          <p>Add to library</p>
        </TooltipContent>
      </Tooltip>
    </Example>
  );
}

Sides

import { For } from "solid-js";
import { Button } from "~/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
function TooltipSides() {
  return (
    <Example title="Sides">
      <div class="flex flex-wrap gap-2">
        <For each={["top", "right", "bottom", "left"] as const}>
          {(side) => (
            <Tooltip placement={side}>
              <TooltipTrigger as={Button} variant="outline" class="w-fit capitalize">
                {side}
              </TooltipTrigger>
              <TooltipContent>
                <p>Add to library</p>
              </TooltipContent>
            </Tooltip>
          )}
        </For>
      </div>
    </Example>
  );
}

With Icon

import { Info } from "lucide-solid";
import { Button } from "~/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
function TooltipWithIcon() {
  return (
    <Example title="With Icon">
      <Tooltip>
        <TooltipTrigger as={Button} variant="ghost" size="icon">
          <Info />
          <span class="sr-only">Info</span>
        </TooltipTrigger>
        <TooltipContent>
          <p>Additional information</p>
        </TooltipContent>
      </Tooltip>
    </Example>
  );
}

Long Content

import { Button } from "~/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
function TooltipLongContent() {
  return (
    <Example title="Long Content">
      <Tooltip>
        <TooltipTrigger as={Button} variant="outline" class="w-fit">
          Show Tooltip
        </TooltipTrigger>
        <TooltipContent>
          To learn more about how this works, check out the docs. If you have any questions, please
          reach out to us.
        </TooltipContent>
      </Tooltip>
    </Example>
  );
}

Disabled

import { Button } from "~/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
function TooltipDisabled() {
  return (
    <Example title="Disabled">
      <Tooltip>
        <TooltipTrigger as="span" class="inline-block w-fit">
          <Button variant="outline" disabled>
            Disabled
          </Button>
        </TooltipTrigger>
        <TooltipContent>
          <p>This feature is currently unavailable</p>
        </TooltipContent>
      </Tooltip>
    </Example>
  );
}

With Keyboard Shortcut

import { Save } from "lucide-solid";
import { Button } from "~/components/ui/button";
import { Kbd } from "~/components/ui/kbd";
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
function TooltipWithKeyboard() {
  return (
    <Example title="With Keyboard Shortcut">
      <Tooltip>
        <TooltipTrigger as={Button} variant="outline" size="icon-sm">
          <Save />
        </TooltipTrigger>
        <TooltipContent class="pr-1.5">
          <div class="flex items-center gap-2">
            Save Changes <Kbd>S</Kbd>
          </div>
        </TooltipContent>
      </Tooltip>
    </Example>
  );
}

On Link

import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
function TooltipOnLink() {
  return (
    <Example title="On Link">
      <Tooltip>
        <TooltipTrigger
          as="a"
          href="#"
          class="w-fit text-primary text-sm underline-offset-4 hover:underline"
          onClick={(e: MouseEvent) => e.preventDefault()}
        >
          Learn more
        </TooltipTrigger>
        <TooltipContent>
          <p>Click to read the documentation</p>
        </TooltipContent>
      </Tooltip>
    </Example>
  );
}

Formatted Content

import { Button } from "~/components/ui/button";
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
function TooltipFormatted() {
  return (
    <Example title="Formatted Content">
      <Tooltip>
        <TooltipTrigger as={Button} variant="outline" class="w-fit">
          Status
        </TooltipTrigger>
        <TooltipContent>
          <div class="flex flex-col gap-1">
            <p class="font-semibold">Active</p>
            <p class="text-xs opacity-80">Last updated 2 hours ago</p>
          </div>
        </TooltipContent>
      </Tooltip>
    </Example>
  );
}
PreviewDocs