{
  "tag": "ed-tooltip",
  "kind": "component",
  "summary": "Shows a short, non-essential hint next to an element on hover or keyboard focus, such as the meaning of an\nicon.",
  "status": "experimental",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tooltip/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tooltip/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-popup"
  ],
  "use": [
    "Explaining an ambiguous or unlabeled icon, an abbreviation, or an unfamiliar term where the extra context is helpful but not required",
    "Revealing the full value of text that has been visually truncated, so a hover confirms what was cut off",
    "A short, supplementary hint that enriches understanding without blocking the task"
  ],
  "notFor": [
    {
      "when": "Information the user must have to proceed",
      "instead": "a visible label or hint text"
    },
    {
      "when": "Multi-paragraph content, buttons, or form controls — buttons and form controls turn it into a different component. A simple link is fine: it renders HTML, and the tooltip stays open while hovered (built-in)",
      "instead": "a [Popover](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/popover)"
    },
    {
      "when": "Error or validation messages",
      "instead": "inline validation next to the field"
    }
  ],
  "rules": [
    {
      "id": "tooltip/nothing-essential",
      "rule": "Never put essential information in a tooltip — if the user needs it to complete a task, it must be visible on the page — and never rely on it for anything that must work on touch devices, where there is no hover.",
      "why": "A tooltip is discovered only by chance and is invisible on touch devices."
    },
    {
      "id": "tooltip/brief",
      "rule": "Keep the content to a brief phrase or one or two short lines — never long explanations, general instructions, or content the user must memorize to continue.",
      "why": "It is microcontent, not documentation.",
      "check": "warning"
    },
    {
      "id": "tooltip/hover-and-focus",
      "rule": "Keep the built-in hover-and-focus trigger so keyboard users get the tooltip too — never reduce it to hover alone.",
      "check": "error"
    },
    {
      "id": "tooltip/visible-label",
      "rule": "Let the target keep a visible label of its own — the tooltip adds to it, not replaces it. Never use it as the only label for an interactive icon outside the sanctioned icon-only patterns (see the [Icon usage guide](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/icon/usage)) — give the control a visible text label; where those patterns apply, give it its own screen-reader label with `aria-label` as well.",
      "why": "The tooltip text does not become the name of an `ed-button` for a screen reader.",
      "check": "error"
    },
    {
      "id": "tooltip/not-redundant",
      "rule": "Never restate a label that is already visible.",
      "why": "A redundant tooltip is just noise.",
      "check": "warning"
    },
    {
      "id": "tooltip/placement",
      "rule": "Pick a placement that keeps nearby content the user still needs visible, and never make the tooltip so wide it obscures surrounding content. Staying beside the anchor and inside the viewport is built-in.",
      "check": "warning"
    },
    {
      "id": "tooltip/show-delay",
      "rule": "Keep the short built-in show delay, so tooltips do not flash as the pointer sweeps across the screen — and never make it so slow to appear that it feels broken.",
      "check": "error"
    },
    {
      "id": "tooltip/consistent",
      "rule": "Apply tooltips consistently across similar elements throughout the product."
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "placement",
        "property": "placement",
        "type": "'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'top' | 'bottom' | 'right-start' | 'right-end' | 'left-start' | 'left-end'",
        "default": "'top'",
        "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "default": "false",
        "description": "Disables the tooltip so it won't show when triggered."
      },
      {
        "name": "distance",
        "property": "distance",
        "type": "number",
        "default": "8",
        "description": "The distance in pixels from which to offset the tooltip away from its target."
      },
      {
        "name": "open",
        "property": "open",
        "type": "boolean",
        "default": "false",
        "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods."
      },
      {
        "name": "skidding",
        "property": "skidding",
        "type": "number",
        "default": "0",
        "description": "The distance in pixels from which to offset the tooltip along its target."
      },
      {
        "name": "show-delay",
        "property": "showDelay",
        "type": "number",
        "default": "150",
        "description": "The amount of time to wait before showing the tooltip when the user mouses in."
      },
      {
        "name": "hide-delay",
        "property": "hideDelay",
        "type": "number",
        "default": "0",
        "description": "The amount of time to wait before hiding the tooltip when the user mouses out."
      },
      {
        "name": "trigger",
        "property": "trigger",
        "type": "string",
        "default": "'hover focus'",
        "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically."
      },
      {
        "name": "without-arrow",
        "property": "withoutArrow",
        "type": "boolean",
        "default": "false",
        "description": "Removes the arrow from the tooltip."
      },
      {
        "name": "for",
        "property": "for",
        "type": "null | string",
        "default": "null",
        "description": "The ID of the tooltip's anchor element, looked up in the tooltip's own root node. This should be\nan interactive/focusable element such as a button, so that the `focus` trigger can reach it."
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "show",
        "description": "Shows the tooltip."
      },
      {
        "name": "hide",
        "description": "Hides the tooltip"
      }
    ],
    "events": [
      {
        "name": "ed-show",
        "react": "onEdShow",
        "description": "Emitted when the tooltip begins to show. Cancelable; calling `preventDefault()` keeps it closed."
      },
      {
        "name": "ed-after-show",
        "react": "onEdAfterShow",
        "description": "Emitted after the tooltip has shown and all animations are complete."
      },
      {
        "name": "ed-hide",
        "react": "onEdHide",
        "description": "Emitted when the tooltip begins to hide. Cancelable; calling `preventDefault()` keeps it open."
      },
      {
        "name": "ed-after-hide",
        "react": "onEdAfterHide",
        "description": "Emitted after the tooltip has hidden and all animations are complete."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The tooltip's default slot where any content should live. HTML and a simple link are fine; buttons and form controls belong in ed-popover instead."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-tooltip-max-width",
        "description": "The maximum width of the tooltip before its content will wrap."
      },
      {
        "name": "--ed-tooltip-arrow-size",
        "default": "0.375rem",
        "description": "The size of the arrow pointing at the anchor. Set to 0 to remove it."
      },
      {
        "name": "--ed-tooltip-border-style",
        "default": "none",
        "description": "The border style of the tooltip's surface."
      },
      {
        "name": "--ed-tooltip-border-width",
        "default": "0px",
        "description": "The border width of the tooltip's surface. Always give it a unit: a unitless 0 breaks the `calc()` that sizes the arrow."
      },
      {
        "name": "--ed-tooltip-border-radius",
        "default": "var(--ed-border-radius-2x)",
        "description": "The corner radius of the tooltip's surface."
      },
      {
        "name": "--ed-tooltip-font-size",
        "default": "var(--ed-font-size-m)",
        "description": "The font size of the tooltip's content."
      },
      {
        "name": "--ed-tooltip-line-height",
        "default": "var(--ed-line-height-expanded)",
        "description": "The line height of the tooltip's content."
      }
    ],
    "parts": [
      {
        "name": "panel",
        "description": "The floating surface holding the content. Carries the frame, background and shadow."
      },
      {
        "name": "popup",
        "description": "The internal `<ed-popup>` element that positions the tooltip."
      },
      {
        "name": "popup__popup",
        "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container."
      },
      {
        "name": "popup__arrow",
        "description": "The popup's exported `arrow` part. Use this to target the tooltip's arrow."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/tooltip/tooltip.js';",
  "react": {
    "component": "EdTooltip",
    "import": "import EdTooltip from '@eurodata/eurodata-ui/dist/react/tooltip/index.js';"
  }
}