Tooltip

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

Radix Docs API Reference GitHub Storybook

import { Tooltip } from '@/components/Tooltip';  export const TooltipHero = () => (  <div className="flex justify-center">    <Tooltip content="Which KPIs are the most visited in your project">      <span className="rounded-md bg-gray-100 p-2 text-sm font-medium text-gray-700 dark:border dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300">        Hover over me      </span>    </Tooltip>  </div>);

Installation

1
Install dependencies:
npm install @radix-ui/react-tooltip

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 }

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;

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

import { Tooltip } from '@/components/Tooltip';  export const TooltipSideExample = () => (  <div className="flex flex-wrap justify-center gap-6">    <Tooltip side="top" content="Tooltip">      <span className="rounded-md bg-gray-100 p-2 text-sm font-medium text-gray-700 dark:border dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300">        Top      </span>    </Tooltip>    <Tooltip side="right" content="Tooltip">      <span className="rounded-md bg-gray-100 p-2 text-sm font-medium text-gray-700 dark:border dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300">        Right      </span>    </Tooltip>    <Tooltip side="bottom" content="Tooltip">      <span className="rounded-md bg-gray-100 p-2 text-sm font-medium text-gray-700 dark:border dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300">        Bottom      </span>    </Tooltip>    <Tooltip side="left" content="Tooltip">      <span className="rounded-md bg-gray-100 p-2 text-sm font-medium text-gray-700 dark:border dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300">        Left      </span>    </Tooltip>  </div>);

Example: No arrow

To disable the arrow indicator, use the showArrow prop.

import { Tooltip } from '@/components/Tooltip';  export const TooltipShowArrowExample = () => (  <div className="flex justify-center">    <Tooltip      showArrow={false}      content="Which KPIs are the most visited in your project"    >      <span className="rounded-md bg-gray-100 p-2 text-sm font-medium text-gray-700 dark:border dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300">        Hover over me      </span>    </Tooltip>  </div>);

This component uses the Radix UI API.

content: Tooltip text on hover.

side: Placement of the tooltip relative to the trigger

showArrow: Small arrow pointing to the tooltip trigger.

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

Tooltip

Installation

Install dependencies:

Add component:

Update tailwind.config.ts

Example: Tooltip Sides

Example: No arrow

API Reference: Tooltip