Animated Tooltip
Info-bulle qui s'anime au survol ou au focus avec un effet d'echelle et de fondu. Installez Animated Tooltip depuis le registre VLLNT UI avec la CLI shadcn.
Info-bulle qui s'anime au survol ou au focus avec un effet d'echelle et de fondu. Fait partie de la famille overlay dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Animated Tooltip a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/animated-tooltip.jsonSource
"use client";
import * as React from "react";
import { cn } from "../../lib/utils";
/** Side of the trigger the tooltip appears on. */
export type TooltipSide = "bottom" | "top";
/** Props for {@link AnimatedTooltip}. */
export type AnimatedTooltipProps = React.ComponentPropsWithoutRef<"div"> & {
/** Trigger element that reveals the tooltip on hover or focus. */
children: React.ReactNode;
/** Content shown inside the tooltip bubble. */
content: React.ReactNode;
/** Side of the trigger the tooltip appears on. Defaults to `"top"`. */
side?: TooltipSide;
};
function Tooltip({
content,
side,
}: {
content: React.ReactNode;
side: TooltipSide;
}) {
return (
<div
className={cn(
"absolute left-1/2 z-50 -translate-x-1/2 animate-in fade-in-0 zoom-in-95 whitespace-nowrap rounded-md border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
side === "top" ? "bottom-full mb-2" : "top-full mt-2",
)}
role="tooltip"
>
{content}
</div>
);
}
/**
* Trigger that reveals a tooltip bubble on hover or focus.
*
* The bubble scales and fades in; closing unmounts it.
*
* @example
* ```tsx
* <AnimatedTooltip content="Copied!"><button>Copy</button></AnimatedTooltip>
* ```
*/
export const AnimatedTooltip = ({
children,
className,
content,
ref,
side = "top",
...props
}: AnimatedTooltipProps & { ref?: React.Ref<HTMLDivElement> }) => {
const [open, setOpen] = React.useState(false);
return (
<div
className={cn("relative inline-flex", className)}
onBlur={() => {
setOpen(false);
}}
onFocus={() => {
setOpen(true);
}}
onPointerEnter={() => {
setOpen(true);
}}
onPointerLeave={() => {
setOpen(false);
}}
ref={ref}
{...props}
>
{children}
{open ? <Tooltip content={content} side={side} /> : undefined}
</div>
);
};
AnimatedTooltip.displayName = "AnimatedTooltip";
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.