Tooltip

{
  "state": {
    "visible": { "type": "boolean", "initial": false }
  },
  "actions": [
    { "name": "show", "steps": [{ "do": "set", "target": "visible", "value": { "expr": "lit", "value": true } }] },
    { "name": "hide", "steps": [{ "do": "set", "target": "visible", "value": { "expr": "lit", "value": false } }] }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "props": { "class": { "expr": "lit", "value": "relative inline-flex" } },
    "children": [
      {
        "kind": "element",
        "tag": "button",
        "props": {
          "class": { "expr": "lit", "value": "rounded-md bg-secondary px-3 py-1.5 text-sm" },
          "onMouseEnter": { "action": "show" },
          "onMouseLeave": { "action": "hide" }
        },
        "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Hover me" } }]
      },
      {
        "kind": "if",
        "condition": { "expr": "state", "name": "visible" },
        "then": {
          "kind": "element",
          "tag": "div",
          "props": {
            "role": { "expr": "lit", "value": "tooltip" },
            "class": { "expr": "lit", "value": "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground whitespace-nowrap" }
          },
          "children": [{ "kind": "text", "value": { "expr": "lit", "value": "Tooltip content" } }]
        }
      }
    ]
  }
}