# 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