Tooltip

A small pop-up box that appears when a user hovers or focuses on a component.

Source
Hover this

Installation

npx @rahimstack@latest add tooltip

API Reference

const TooltipAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Tooltip__root",
        "z-50 overflow-hidden rounded-[--radius] px-3 py-1.5 text-sm shadow-md animate-in fade-in-50",
        "bg-gray-800 text-white",
        "data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1",
        "data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
    ]),
})