{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.2.0",
  "name": "ds-texttip",
  "description": "Text tooltip component",
  "docUrl": "https://design.soracom.io/design-system/elements/texttip/",
  "category": "elements",
  "usageNotes": [
    "`data-ds-texttip` provides a short visual tooltip on hover, but it does not provide an accessible name. An empty icon still requires `role=\"img\"` and `aria-label` when it conveys information.",
    "Use a `div.ds-icon` with text content when the icon label should also provide readable fallback text."
  ],
  "htmlElements": [
    "span",
    "div",
    "button",
    "i"
  ],
  "isWebComponent": false,
  "modifiers": {
    "position": {
      "support": "custom",
      "values": [
        "--tip-top-left",
        "--tip-top",
        "--tip-top-right",
        "--tip-bottom-left",
        "--tip-bottom",
        "--tip-bottom-right",
        "--tip-left-top",
        "--tip-left",
        "--tip-left-bottom",
        "--tip-right-top",
        "--tip-right",
        "--tip-right-bottom"
      ]
    },
    "visual-state": {
      "support": "all"
    },
    "color": {
      "support": "all"
    }
  },
  "attributes": {},
  "dataAttributes": [],
  "examples": [
    {
      "name": "basic",
      "html": "<span data-ds-texttip=\"This is a tooltip\">Hover me</span>"
    },
    {
      "name": "on-text",
      "html": "<div class=\"ds-text\" data-ds-texttip=\"Additional information about this text\">Hover for details</div>"
    },
    {
      "name": "on-button",
      "html": "<button class=\"ds-button --primary\" type=\"button\" data-ds-texttip=\"Click to submit the form\"><span>Submit</span></button>"
    },
    {
      "name": "on-icon",
      "html": "<i class=\"ds-icon --icon-question\" role=\"img\" aria-label=\"Help information\" data-ds-texttip=\"Help information\"></i>"
    },
    {
      "name": "on-icon-with-fallback-text",
      "html": "<div class=\"ds-icon --icon-online-solid\" data-ds-texttip=\"Online\">Online</div>"
    },
    {
      "name": "on-label",
      "html": "<div class=\"ds-text --label\">Label text <i class=\"ds-icon --icon-online-solid --small\" role=\"img\" aria-label=\"Status info\" data-ds-texttip=\"Status info\"></i></div>"
    },
    {
      "name": "inline",
      "html": "<div class=\"ds-text\">This text has an <span data-ds-texttip=\"Application Programming Interface\">API</span> reference with tooltip.</div>"
    },
    {
      "name": "tip-bottom",
      "html": "<span data-ds-texttip=\"Tooltip below\" class=\"--tip-bottom\">Hover (bottom)</span>"
    },
    {
      "name": "tip-left",
      "html": "<span data-ds-texttip=\"Tooltip on left\" class=\"--tip-left\">Hover (left)</span>"
    },
    {
      "name": "tip-right",
      "html": "<span data-ds-texttip=\"Tooltip on right\" class=\"--tip-right\">Hover (right)</span>"
    },
    {
      "name": "tip-bottom-right",
      "html": "<i class=\"ds-icon --icon-online-solid --tip-bottom-right\" role=\"img\" aria-label=\"Positioned bottom-right\" data-ds-texttip=\"Positioned bottom-right\"></i>"
    }
  ]
}