{
  "name": "ds-texttip",
  "description": "Text tooltip component",
  "docUrl": "https://design.soracom.io/design-system/elements/texttip/",
  "category": "elements",
  "htmlElements": [
    "span",
    "div",
    "button",
    "i"
  ],
  "isWebComponent": false,
  "modifiers": {
    "position": [
      "--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": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "color": "all"
  },
  "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\" data-ds-texttip=\"Help information\"></i>"
    },
    {
      "name": "on-label",
      "html": "<div class=\"ds-text --label\">Label text <i class=\"ds-icon --icon-online-solid --small\" 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\" data-ds-texttip=\"Positioned bottom-right\"></i>"
    }
  ]
}