1 variant

Elastic Tooltip

A tooltip that springs into place beside its trigger, flipping side when it runs out of room and skipping its delay once you're already reading labels.

usage.tsx

import { ElasticTooltip } from "@/components/registry/elastic-tooltip";

export function NotificationsButton() {
  return (
    <ElasticTooltip label="Notifications">
      <button aria-label="Notifications">...</button>
    </ElasticTooltip>
  );
}

"use client";

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import {
  cloneElement,
  isValidElement,
  type ReactElement,
  type ReactNode,
  useCallback,
  useEffect,
  useId,
  useLayoutEffect,

153 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/elastic-tooltip

Props

labelRequiredReactNode

What the tooltip says.

childrenRequiredReactNode

The trigger. A single element gets aria describedby wired to the label automatically.

side"top" | "bottom"Default "top"

Preferred side. It flips to the other one when there is no room.

classNamestring

Merged last, so anything passed here wins over the component's own classes.