{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "Tooltip",
  "description": "Initializes a tooltip",
  "structure": {
    "name": "root",
    "restrict": [
      "div",
      "span"
    ],
    "description": "Initializes a tooltip",
    "attributes": {
      "static": {
        "role": "tooltip",
        "class": "slds-popover slds-popover_tooltip"
      },
      "bound": {
        "id": {
          "prop": "tooltipId",
          "required": true
        }
      }
    },
    "children": [
      {
        "name": "trigger",
        "restrict": [
          "button",
          "a",
          "span"
        ],
        "description": "element that triggers tooltip display",
        "attributes": {
          "static": {
            "aria-disabled": "true"
          },
          "bound": {
            "aria-describedby": {
              "prop": "tooltipId"
            }
          }
        },
        "children": [
          {
            "name": "triggerIcon",
            "description": "Decorative icon inside a button-icon trigger",
            "component": "PrimitiveIcon",
            "renderWhen": {
              "prop": "triggerKind",
              "eq": "buttonIcon"
            },
            "attributes": {
              "static": {
                "class": "slds-button__icon"
              }
            },
            "children": [
              {
                "name": "triggerIconUse"
              }
            ]
          },
          {
            "name": "triggerIconContainer",
            "restrict": [
              "span"
            ],
            "description": "Wrapper around an icon-only trigger (e.g. link trigger) that conveys icon container semantics",
            "children": [
              {
                "name": "triggerIconContainerSvg",
                "description": "SVG glyph for the icon-container trigger",
                "component": "PrimitiveIcon",
                "attributes": {
                  "static": {
                    "class": "slds-icon slds-icon_xx-small slds-icon-text-default"
                  }
                },
                "children": [
                  {
                    "name": "triggerIconContainerUse"
                  }
                ]
              },
              {
                "name": "triggerIconContainerAssistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden accessible label for the icon-container trigger",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ],
            "renderWhen": {
              "prop": "triggerKind",
              "eq": "link"
            },
            "attributes": {
              "static": {
                "class": "slds-icon_container slds-icon-utility-info"
              }
            }
          },
          {
            "name": "triggerAssistiveText",
            "restrict": [
              "span"
            ],
            "description": "Visually hidden accessible label paired with a button-icon trigger",
            "renderWhen": {
              "prop": "triggerKind",
              "eq": "buttonIcon"
            },
            "attributes": {
              "static": {
                "class": "slds-assistive-text"
              }
            }
          }
        ],
        "variants": [
          {
            "name": "triggerKind",
            "description": "Element kind used to trigger the tooltip; mirrors the absorbed classes from the rendered button or link",
            "options": [
              {
                "value": "button",
                "class": "slds-button"
              },
              {
                "value": "buttonNeutral",
                "class": "slds-button slds-button_neutral"
              },
              {
                "value": "buttonIcon",
                "class": "slds-button slds-button_icon"
              },
              {
                "value": "link",
                "class": ""
              }
            ]
          }
        ]
      },
      {
        "name": "content",
        "restrict": [
          "div"
        ],
        "description": "Tooltip content",
        "slot": {
          "name": "default",
          "required": true
        },
        "children": [
          {
            "name": "contentHelper",
            "restrict": [
              "div"
            ],
            "description": "Optional decorative helper block inside the tooltip body, hidden from assistive technologies",
            "attributes": {
              "static": {
                "aria-hidden": "true",
                "class": "slds-m-top_x-small"
              }
            },
            "children": [
              {
                "name": "contentHelperIconContainer",
                "restrict": [
                  "span"
                ],
                "description": "Inline icon container nested in the helper text",
                "children": [
                  {
                    "name": "contentHelperIconSvg",
                    "description": "SVG glyph for the helper icon",
                    "component": "PrimitiveIcon",
                    "attributes": {
                      "static": {
                        "class": "slds-icon slds-icon_xx-small"
                      }
                    },
                    "children": [
                      {
                        "name": "contentHelperIconUse"
                      }
                    ]
                  },
                  {
                    "name": "contentHelperAssistiveText",
                    "restrict": [
                      "span"
                    ],
                    "description": "Visually hidden accessible label for the helper icon",
                    "attributes": {
                      "static": {
                        "class": "slds-assistive-text"
                      }
                    }
                  }
                ],
                "attributes": {
                  "static": {
                    "class": "slds-icon_container slds-icon-utility-info"
                  }
                }
              }
            ]
          }
        ],
        "attributes": {
          "static": {
            "class": "slds-popover__body"
          }
        }
      }
    ],
    "variants": [
      {
        "name": "placement",
        "description": "Tooltip placement relative to trigger",
        "default": "bottom",
        "options": [
          {
            "value": "top",
            "class": "slds-nubbin_bottom"
          },
          {
            "value": "bottom",
            "class": "slds-nubbin_top"
          },
          {
            "value": "left",
            "class": "slds-nubbin_right"
          },
          {
            "value": "right",
            "class": "slds-nubbin_left"
          },
          {
            "value": "top-left",
            "class": "slds-nubbin_bottom-left"
          },
          {
            "value": "top-right",
            "class": "slds-nubbin_bottom-right"
          },
          {
            "value": "bottom-left",
            "class": "slds-nubbin_top-left"
          },
          {
            "value": "bottom-right",
            "class": "slds-nubbin_top-right"
          },
          {
            "value": "left-top",
            "class": "slds-nubbin_right-top"
          },
          {
            "value": "left-bottom",
            "class": "slds-nubbin_right-bottom"
          },
          {
            "value": "right-top",
            "class": "slds-nubbin_left-top"
          },
          {
            "value": "right-bottom",
            "class": "slds-nubbin_left-bottom"
          }
        ]
      }
    ],
    "modifiers": [
      {
        "name": "animation",
        "attribute": "class",
        "options": [
          {
            "propValue": "bottomToTop",
            "value": "slds-slide-from-bottom-to-top",
            "description": "Slides tooltip from bottom to top"
          },
          {
            "propValue": "topToBottom",
            "value": "slds-slide-from-top-to-bottom",
            "description": "Slides tooltip from top to bottom"
          },
          {
            "propValue": "rightToLeft",
            "value": "slds-slide-from-right-to-left",
            "description": "Slides tooltip from right to left"
          },
          {
            "propValue": "leftToRight",
            "value": "slds-slide-from-left-to-right",
            "description": "Slides tooltip from left to right"
          },
          {
            "propValue": "riseFromGround",
            "value": "slds-rise-from-ground",
            "description": "Toggles on tooltip"
          },
          {
            "propValue": "fallIntoGround",
            "value": "slds-fall-into-ground",
            "description": "Toggles off tooltip"
          }
        ],
        "description": "tooltip entrance animation"
      }
    ]
  },
  "states": [
    {
      "name": "open",
      "type": "boolean",
      "aria": "aria-expanded",
      "description": "Whether the tooltip is visible"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "tooltip-role",
        "description": "Tooltip must have role='tooltip'"
      },
      {
        "id": "aria-describedby",
        "description": "Triggering element must have aria-describedby pointing to tooltip id"
      },
      {
        "id": "keyboard-accessible",
        "description": "Tooltip must be accessible via keyboard focus, not just hover"
      },
      {
        "id": "decorative-icons-hidden",
        "description": "Decorative icons inside the trigger and tooltip body must set aria-hidden='true'"
      }
    ]
  },
  "componentRefs": {
    "PrimitiveIcon": {
      "description": "Bare SVG icon composed directly inside the component. The host node supplies the SVG class (e.g. slds-button__icon, slds-menu__item-icon) via componentProps; PrimitiveIcon contributes the sprite-href binding.",
      "props": {
        "iconName": {
          "type": "string",
          "required": true,
          "description": "Sprite reference for the icon glyph"
        }
      }
    }
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": false,
      "lbc": "lightning-helptext"
    }
  },
  "cssSource": "./tooltip.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "stateClasses": [
    {
      "state": "open",
      "class": "slds-is-open"
    }
  ]
}