{
  "name": "ds-richtip",
  "description": "Rich content tooltip component",
  "docUrl": "https://design.soracom.io/design-system/elements/richtip/",
  "category": "elements",
  "htmlElements": [
    "div",
    "details"
  ],
  "isWebComponent": false,
  "modifiers": {
    "state": [
      "--active"
    ],
    "visual-state": "all",
    "color": "all",
    "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"
    ]
  },
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-richtip\"><i class=\"ds-icon --icon-info ds-richtip__button\"></i><div class=\"ds-richtip__content\">Global multicarrier cellular connectivity <strong>built for IoT & M2M</strong>. Pay as you go with no commitments and all the <a href=\"#\">tools you need</a> to manage and secure your IoT network and devices.</div></div>"
    },
    {
      "name": "text-trigger",
      "html": "<div class=\"ds-richtip\"><div class=\"ds-richtip__button ds-text\">Text Content</div><div class=\"ds-richtip__content\">Rich tooltip content with <strong>formatting</strong>.</div></div>"
    },
    {
      "name": "button-trigger",
      "html": "<div class=\"ds-richtip\"><button class=\"ds-button ds-richtip__button\"><span>Button label</span></button><div class=\"ds-richtip__content\">Rich tooltip content with <strong>formatting</strong>.</div></div>"
    },
    {
      "name": "details",
      "html": "<details class=\"ds-richtip\"><summary><i class=\"ds-icon --icon-info\"></i></summary><div class=\"ds-richtip__content\">Click the icon to toggle this rich content tooltip.</div></details>"
    },
    {
      "name": "active",
      "html": "<div class=\"ds-richtip --active\"><i class=\"ds-icon --icon-info ds-richtip__button\"></i><div class=\"ds-richtip__content\">This tooltip is always visible with the <code>--active</code> modifier.</div></div>"
    }
  ]
}