{
  "element": "nve-toggletip",
  "entrypoint": "@nvidia-elements/core/toggletip/toggletip.examples.json",
  "items": [
    {
      "id": "toggletip",
      "name": "Default",
      "template": "<nve-toggletip id=\"toggletip\">hello there</nve-toggletip>\n<nve-button popovertarget=\"toggletip\">button</nve-button>\n",
      "summary": "Basic toggletip requiring click to open and close. Unlike tooltips that appear on hover, use toggletips for interactive content, extra details, or when users need time to read or interact with the popover content.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "toggletip-visual",
      "name": "Visual",
      "template": "<nve-toggletip anchor=\"toggletip-btn\">hello there</nve-toggletip>\n<nve-button id=\"toggletip-btn\">button</nve-button>\n",
      "summary": "Visual example using anchor attribute for explicit trigger-target relationship and consistent toggletip implementation across your application.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toggletip-content",
      "name": "Content",
      "template": "<nve-toggletip anchor=\"btn\">\n  <nve-toggletip-header>\n    <h3 nve-text=\"heading sm\">Toggletip Header</h3>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <p nve-text=\"body\">Toggletip Footer</p>\n  </nve-toggletip-footer>\n</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n",
      "summary": "Toggletip with complete structure including header, content, and footer sections. Perfect for rich interactive content like quick forms, action menus, or detailed explanations that gain from organized layout.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "toggletip-content-with-footer",
      "name": "ContentWithFooter",
      "template": "<nve-toggletip anchor=\"btn\">\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <p nve-text=\"body\">Toggletip Footer</p>\n  </nve-toggletip-footer>\n</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n",
      "summary": "Toggletip with footer for action buttons or supplementary links. Use when toggletip content needs follow-up actions, navigation, or extra context links without requiring a header section.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "toggletip-content-with-header",
      "name": "ContentWithHeader",
      "template": "<nve-toggletip anchor=\"btn\">\n  <nve-toggletip-header>\n    <h3 nve-text=\"heading sm\">Toggletip Header</h3>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n",
      "summary": "Toggletip with header for titled content sections. Use when toggletip information benefits from a clear title or heading to establish context, improving content scannability and understanding.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toggletip-events",
      "name": "Events",
      "template": "<nve-toggletip id=\"toggletip\">hello there</nve-toggletip>\n<nve-button popovertarget=\"toggletip\">button</nve-button>\n<script type=\"module\">\n  const toggletip = document.querySelector(\"nve-toggletip\");\n  toggletip.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  toggletip.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  toggletip.addEventListener(\"close\", () => console.log(\"close\"));\n  toggletip.addEventListener(\"open\", () => console.log(\"open\"));\n</script>\n",
      "summary": "Event handling for toggletip lifecycle events. Useful for adding custom behavior when toggletip state changes.",
      "description": "",
      "composition": false,
      "tags": []
    },
    {
      "id": "toggletip-closable",
      "name": "Closable",
      "template": "<nve-toggletip anchor=\"btn\" closable>\n  <nve-toggletip-header>Toggletip Header</nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>Toggletip Footer</nve-toggletip-footer>\n</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n",
      "summary": "Closable toggletip with explicit close button for user control. Use when content is complex enough that users may want to dismiss it independently of clicking outside, providing clear exit paths for longer-form content.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toggletip-alert-group",
      "name": "AlertGroup",
      "template": "<nve-toggletip id=\"toggletip-alert-group\">\n  <nve-toggletip-header>\n    <nve-alert-group status=\"danger\" container=\"full\" prominence=\"emphasis\">\n      <nve-alert>Workflow Failed</nve-alert>\n    </nve-alert-group>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <nve-button style=\"width: 100%\">Retry Workflow</nve-button>\n  </nve-toggletip-footer>\n</nve-toggletip>\n<nve-button popovertarget=\"toggletip-alert-group\">button</nve-button>\n",
      "summary": "Toggletip with alert header for error states or critical messaging. Perfect for displaying error details with recovery actions, combining status communication with actionable next steps in a compact format.",
      "description": "",
      "composition": true,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toggletip-position",
      "name": "Position",
      "template": "<nve-toggletip anchor=\"btn\" position=\"top\">top</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"right\">right</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"bottom\">bottom</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"left\">left</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n",
      "summary": "Toggletip positioning options relative to trigger element. Choose position based on available screen space and content type, ensuring toggletips remain visible and don't extend beyond viewport boundaries.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toggletip-alignment",
      "name": "Alignment",
      "template": "<nve-toggletip anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"top\">top center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"right\">right center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"bottom\">bottom center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"left\">left center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-toggletip>\n<nve-card id=\"card\" style=\"width: 400px; height: 200px\"></nve-card>\n",
      "summary": "Precise toggletip alignment combined with positioning for optimal placement control. Use alignment to fine-tune toggletip placement relative to trigger edges, improving visual flow and reducing content overlap in dense layouts.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toggletip-cross-shadow-root-anchor-position",
      "name": "CrossShadowRootAnchorPosition",
      "template": "<nve-button popovertarget=\"root-toggletip\">document root anchor</nve-button>\n<nve-toggletip id=\"root-toggletip\">document root toggletip</nve-toggletip>\n<demo-shadow-root style=\"visibility: visible !important\">\n  <template shadowrootmode=\"open\">\n    <nve-toggletip id=\"cross-root-toggletip\" hidden>cross root toggletip</nve-toggletip>\n    <slot></slot>\n  </template>\n</demo-shadow-root>\n<nve-button popovertarget=\"cross-root-toggletip\">cross root anchor</nve-button>\n",
      "summary": "Toggletip anchored to elements across shadow DOM boundaries.",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    },
    {
      "id": "toggletip-legacy-behavior-trigger",
      "name": "LegacyBehaviorTrigger",
      "template": "<nve-toggletip behavior-trigger anchor=\"action-btn\" trigger=\"action-btn\" hidden>hello there</nve-toggletip>\n<nve-button id=\"action-btn\">button</nve-button>\n",
      "summary": "Legacy behavior-trigger pattern for automatic toggletip lifecycle management. Deprecated approach with manual trigger attributes, prefer modern popovertarget API for simpler and more maintainable toggletip implementation.",
      "description": "",
      "deprecated": true,
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}