UI

Tooltip

A popup displaying element information when it’s focused or hovered.

Radix DocsAPI ReferenceGitHubStorybook

Installation

  1. 1

    Install dependencies:

    npm install @radix-ui/react-tooltip
  2. 2

    Add component:

    Copy and paste the code into your project’s component directory. Do not forget to update the import paths.
    // Tremor Tooltip [v0.1.0]
import React from "react"import * as TooltipPrimitives from "@radix-ui/react-tooltip"
import { cx } from "@/lib/utils"
interface TooltipProps  extends Omit<TooltipPrimitives.TooltipContentProps, "content" | "onClick">,    Pick<      TooltipPrimitives.TooltipProps,      "open" | "defaultOpen" | "onOpenChange" | "delayDuration"    > {  content: React.ReactNode  onClick?: React.MouseEventHandler<HTMLButtonElement>  side?: "bottom" | "left" | "top" | "right"  showArrow?: boolean}
const Tooltip = React.forwardRef<  React.ElementRef<typeof TooltipPrimitives.Content>,  TooltipProps>(  (    {      children,      className,      content,      delayDuration,      defaultOpen,      open,      onClick,      onOpenChange,      showArrow = true,      side,      sideOffset = 10,      asChild,      ...props    }: TooltipProps,    forwardedRef,  ) => {    return (      <TooltipPrimitives.Provider delayDuration={150}>        <TooltipPrimitives.Root          open={open}          defaultOpen={defaultOpen}          onOpenChange={onOpenChange}          delayDuration={delayDuration}          tremor-id="tremor-raw"        >          <TooltipPrimitives.Trigger onClick={onClick} asChild={asChild}>            {children}          </TooltipPrimitives.Trigger>          <TooltipPrimitives.Portal>            <TooltipPrimitives.Content              ref={forwardedRef}              side={side}              sideOffset={sideOffset}              align="center"              className={cx(                // base                "max-w-60 select-none rounded-md px-2.5 py-1.5 text-sm leading-5 shadow-md",                // text color                "text-gray-50 dark:text-gray-900",                // background color                "bg-gray-900 dark:bg-gray-50",                // transition                "will-change-[transform,opacity]",                "data-[side=bottom]:animate-slideDownAndFade data-[side=left]:animate-slideLeftAndFade data-[side=right]:animate-slideRightAndFade data-[side=top]:animate-slideUpAndFade data-[state=closed]:animate-hide",                className,              )}              {...props}            >              {content}              {showArrow ? (                <TooltipPrimitives.Arrow                  className="border-none fill-gray-900 dark:fill-gray-50"                  width={12}                  height={7}                  aria-hidden="true"                />              ) : null}            </TooltipPrimitives.Content>          </TooltipPrimitives.Portal>        </TooltipPrimitives.Root>      </TooltipPrimitives.Provider>    )  },)
Tooltip.displayName = "Tooltip"
export { Tooltip, type TooltipProps }
  3. 3

    Update tailwind.config.ts

    Extend your theme with our animation and keyframes.
    import type { Config } from 'tailwindcss';export default {  // ...  theme: {    extend: {      keyframes: {        hide: {          from: { opacity: "1" },          to: { opacity: "0" },        },        slideDownAndFade: {          from: { opacity: "0", transform: "translateY(-6px)" },          to: { opacity: "1", transform: "translateY(0)" },        },        slideLeftAndFade: {          from: { opacity: "0", transform: "translateX(6px)" },          to: { opacity: "1", transform: "translateX(0)" },        },        slideUpAndFade: {          from: { opacity: "0", transform: "translateY(6px)" },          to: { opacity: "1", transform: "translateY(0)" },        },        slideRightAndFade: {          from: { opacity: "0", transform: "translateX(-6px)" },          to: { opacity: "1", transform: "translateX(0)" },        },      },      animation: {        hide: "hide 150ms cubic-bezier(0.16, 1, 0.3, 1)",        slideDownAndFade:          "slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",        slideLeftAndFade:          "slideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",        slideUpAndFade: "slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",        slideRightAndFade:          "slideRightAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",      },    },  },  // ...} satisfies Config;

Example: Tooltip Sides

There are 4 Tooltip sides. To can set a side, use the side prop.

Example: No arrow

To disable the arrow indicator, use the showArrow prop.

API Reference: Tooltip

This component uses the Radix UI API.

content
Required
React.ReactNode
Tooltip text on hover.
side
"bottom" | "left" | "top" | "right"
Placement of the tooltip relative to the trigger

Default: "top"

showArrow
boolean
Small arrow pointing to the tooltip trigger.

Default: true

asChild
boolean
When enabled, the wrapper component is rendered as the first child element and its properties combined. Does not work with icons.

Default: false