{
  "name": "tooltip-hover-button",
  "kind": "block",
  "primary": "row-ui",
  "page": "/catalog/ui-patterns/app/tooltip-hover/tooltip-hover.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "gap": "2",
    "align": "center"
  },
  "html": "<row-ui gap=\"2\" align=\"center\">\n  <button-ui icon=\"text-b\" variant=\"ghost\" tooltip=\"Bold\" aria-label=\"Bold\"></button-ui>\n  <button-ui icon=\"text-italic\" variant=\"ghost\" tooltip=\"Italic\" aria-label=\"Italic\"></button-ui>\n  <button-ui icon=\"link\" variant=\"ghost\" tooltip=\"Insert link\" aria-label=\"Insert link\"></button-ui>\n  <button-ui icon=\"image\" variant=\"ghost\" tooltip=\"Insert image\" aria-label=\"Insert image\"></button-ui>\n</row-ui>",
  "source": "catalog/ui-patterns/app/tooltip-hover/tooltip-hover.contents.html",
  "metadata": {
    "domain": "layout",
    "description": "Tooltip on hover — icon buttons with tooltip-ui showing contextual hints on mouse-over. Pattern for toolbar icons with hover tooltips.",
    "keywords": [
      "tooltip",
      "hover",
      "tooltip-ui",
      "mouse-over",
      "hover-hint",
      "popover",
      "label",
      "hint",
      "trigger",
      "button-ui",
      "icon"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "bold",
      "component": "Button",
      "aria-label": "Bold",
      "icon": "text-b",
      "variant": "ghost"
    },
    {
      "id": "italic",
      "component": "Button",
      "aria-label": "Italic",
      "icon": "text-italic",
      "variant": "ghost"
    },
    {
      "id": "insert-link",
      "component": "Button",
      "aria-label": "Insert link",
      "icon": "link",
      "variant": "ghost"
    },
    {
      "id": "insert-image",
      "component": "Button",
      "aria-label": "Insert image",
      "icon": "image",
      "variant": "ghost"
    },
    {
      "id": "root",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "bold",
        "italic",
        "insert-link",
        "insert-image"
      ]
    }
  ]
}