Tooltip

A lightweight, direction-aware tooltip component designed for Astro projects. Fully themeable, compatible with custom orientations, and built to enhance UX with accessible, hover-based hints — all without requiring JavaScript by default.

Install

pnpm dlx hybrid-astro-ui@latest add tooltip

npx hybrid-astro-ui@latest add tooltip

yarn dlx hybrid-astro-ui@latest add tooltip

bunx hybrid-astro-ui@latest add tooltip

---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/src/components/hybrid-astro-ui/tooltip"
import { Button } from "@/src/components/hybrid-astro-ui/button"
---
<div>
    <Tooltip>
        <TooltipTrigger>
            <Button>Bottom</Button>
        </TooltipTrigger>
        <TooltipContent class="custom-class" orientation="bottom">
            Tooltip message
        </TooltipContent>
    </Tooltip>

    <Tooltip>
        <TooltipTrigger>
            <Button>Top</Button>
        </TooltipTrigger>
        <TooltipContent orientation="top">
            Tooltip message
        </TooltipContent>
    </Tooltip>

    <Tooltip>
        <TooltipTrigger>
            <Button>Left</Button>
        </TooltipTrigger>
        <TooltipContent orientation="left">
            Tooltip message
        </TooltipContent>
    </Tooltip>


    <Tooltip>
        <TooltipTrigger>
            <Button>Right</Button>
        </TooltipTrigger>
        <TooltipContent orientation="right">
            Tooltip message
        </TooltipContent>
    </Tooltip>
</div>