{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "tooltip",
    "type": "registry:component",
    "title": "Tooltip",
    "description": "Label shown on hover or keyboard focus. Position is set with data-side. Add data-open to force it visible.",
    "registryDependencies": [
        "tokens",
        "button"
    ],
    "meta": {
        "category": "Feedback",
        "layout": "tooltip"
    },
    "files": [
        {
            "path": "components/tooltip.html",
            "type": "registry:file",
            "target": "components/tooltip.html",
            "content": "<!-- Tooltip\n     Wrap the trigger and .dp-tooltip-content in .dp-tooltip. Shows on hover\n     and keyboard focus. Position with data-side (top, bottom). The third\n     example uses data-open so it stays visible. -->\n\n<span class=\"dp-tooltip\" tabindex=\"0\">\n  <button class=\"dp-btn\" type=\"button\" data-variant=\"outline\" data-size=\"sm\">Hover me</button>\n  <span class=\"dp-tooltip-content\" role=\"tooltip\">Refreshed monthly</span>\n</span>\n\n<span class=\"dp-tooltip\" data-side=\"bottom\" tabindex=\"0\">\n  <button class=\"dp-btn\" type=\"button\" data-variant=\"outline\" data-size=\"sm\">Below</button>\n  <span class=\"dp-tooltip-content\" role=\"tooltip\">Shown beneath the trigger</span>\n</span>\n\n<span class=\"dp-tooltip\" data-open>\n  <button class=\"dp-btn\" type=\"button\" data-size=\"sm\">Always on</button>\n  <span class=\"dp-tooltip-content\" role=\"tooltip\">This tooltip is forced open</span>\n</span>\n"
        },
        {
            "path": "components/tooltip.css",
            "type": "registry:file",
            "target": "components/tooltip.css",
            "content": "/* Tooltip\n   A label shown on hover or focus. Wrap the trigger and .dp-tooltip-content in\n   .dp-tooltip. Position is set with data-side (top (default), bottom).\n   Add data-open to force it visible. Colour and type from tokens.css. */\n\n.dp-tooltip {\n  position: relative;\n  display: inline-flex;\n}\n\n.dp-tooltip-content {\n  position: absolute;\n  left: 50%;\n  bottom: calc(100% + 8px);\n  transform: translateX(-50%);\n  z-index: 20;\n  background: var(--dp-navy);\n  color: var(--dp-white);\n  font-size: var(--dp-text-xs);\n  font-weight: var(--dp-weight-semibold);\n  line-height: 1.3;\n  padding: var(--dp-space-2) var(--dp-space-3);\n  border-radius: var(--dp-radius-sm);\n  box-shadow: var(--dp-shadow-md);\n  white-space: nowrap;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity var(--dp-transition);\n}\n\n/* Arrow */\n.dp-tooltip-content::after {\n  content: \"\";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 5px solid transparent;\n  border-top-color: var(--dp-navy);\n}\n\n.dp-tooltip[data-side=\"bottom\"] .dp-tooltip-content {\n  bottom: auto;\n  top: calc(100% + 8px);\n}\n\n.dp-tooltip[data-side=\"bottom\"] .dp-tooltip-content::after {\n  top: auto;\n  bottom: 100%;\n  border-top-color: transparent;\n  border-bottom-color: var(--dp-navy);\n}\n\n/* Shown on hover, keyboard focus, or when forced open */\n.dp-tooltip:hover .dp-tooltip-content,\n.dp-tooltip:focus-within .dp-tooltip-content,\n.dp-tooltip[data-open] .dp-tooltip-content {\n  opacity: 1;\n}\n"
        }
    ]
}