# Tooltip A floating label that appears on hover or focus, providing additional context. ```svelte Hover Hello Skeleton ``` Breaking convention in Skeleton, this component is provided "headless". Meaning no default styles are applied out of the box. This ensures you retain full control of all styling for maximum flexibility. ## Arrow Visually connects the popover content to the trigger element. Will automatically align based on the selected side. ```svelte Hover Hello Skeleton ``` ## Z-Index By default Skeleton does not take an opinionated stance regarding z-index stacking. The result is the component can sometimes be occluded beneath other elements with a higher index. The Z-Index can controlled by applying a utility class to the `Positioner` component. ```svelte
Default (auto) This example will be below the sibling. Above (20) This example will be above the sibling.
Sibling (10)
``` ## Provider Pattern Use the [Provider Pattern](/docs/\[framework]/get-started/fundamentals#provider-pattern) to gain access to the inner component APIs. ```svelte
Anchor ({tooltip().open ? 'open' : 'closed'}) Hello Skeleton
``` ## Direction Set the text direction (`ltr` or `rtl`) using the `dir` prop. ```svelte Hover Hello Skeleton ``` ## Anatomy Here's an overview of how the Tooltip component is structured in code: ```svelte ``` ## API Reference ### Root | Prop | Description | Type | Default | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | ids | The ids of the elements in the tooltip. Useful for composition. | Partial\<\{ trigger: string \| ((value?: string \| undefined) => string); content: string; arrow: string; positioner: string; }> \| undefined | - | | openDelay | The open delay of the tooltip. | number \| undefined | 400 | | closeDelay | The close delay of the tooltip. | number \| undefined | 150 | | closeOnPointerDown | Whether to close the tooltip on pointerdown. | boolean \| undefined | true | | closeOnEscape | Whether to close the tooltip when the Escape key is pressed. | boolean \| undefined | true | | closeOnScroll | Whether the tooltip should close on scroll | boolean \| undefined | true | | closeOnClick | Whether the tooltip should close on click | boolean \| undefined | true | | interactive | Whether the tooltip's content is interactive. In this mode, the tooltip will remain open when user hovers over the content. | boolean \| undefined | false | | onOpenChange | Function called when the tooltip is opened. | ((details: OpenChangeDetails) => void) \| undefined | - | | aria-label | Custom label for the tooltip. | string \| undefined | - | | positioning | The user provided options used to position the popover content | PositioningOptions \| undefined | - | | disabled | Whether the tooltip is disabled | boolean \| undefined | - | | open | The controlled open state of the tooltip | boolean \| undefined | - | | defaultOpen | The initial open state of the tooltip when rendered. Use when you don't need to control the open state of the tooltip. | boolean \| undefined | - | | triggerValue | The controlled trigger value | string \| null \| undefined | - | | defaultTriggerValue | The initial trigger value when rendered. Use when you don't need to control the trigger value. | string \| null \| undefined | - | | onTriggerValueChange | Function called when the trigger value changes. | ((details: TriggerValueChangeDetails) => void) \| undefined | - | | dir | The document's text/writing direction. | "ltr" \| "rtl" \| undefined | "ltr" | | getRootNode | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | (() => ShadowRoot \| Node \| Document) \| undefined | - | | children | The default slot content to be rendered within the component. | Snippet\<\[]> \| undefined | - | ### Provider | Prop | Description | Type | Default | | -------- | ------------------------------------------------------------- | -------------------------- | ------- | | value | - | any | - | | children | The default slot content to be rendered within the component. | Snippet\<\[]> \| undefined | - | ### Context | Prop | Description | Type | Default | | -------- | ----------- | ----------------------------------------- | ------- | | children | - | Snippet\<\[() => TooltipApi\]> | - | ### Trigger | Prop | Description | Type | Default | | ------- | --------------------------- | --------------------------------------------------- | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"button">]> \| undefined | - | ### Positioner | Prop | Description | Type | Default | | ------- | --------------------------- | ------------------------------------------------ | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - | ### Content | Prop | Description | Type | Default | | ------- | --------------------------- | ------------------------------------------------ | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - | ### Arrow | Prop | Description | Type | Default | | ------- | --------------------------- | ------------------------------------------------ | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - | ### ArrowTip | Prop | Description | Type | Default | | ------- | --------------------------- | ------------------------------------------------ | ------- | | element | Render the element yourself | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | - |