# Tooltip
A floating label that appears on hover or focus, providing additional context.
```tsx
import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
Hover MeHello 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.
```tsx
import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';
export default function Arrow() {
return (
HoverHello 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.
```tsx
import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';
export default function ZIndex() {
return (
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.
```tsx
import { Portal, Tooltip, useTooltip } from '@skeletonlabs/skeleton-react';
export default function Programmatic() {
const tooltip = useTooltip();
return (
);
}
```
## Direction
Set the text direction (`ltr` or `rtl`) using the `dir` prop.
```tsx
import { Portal, Tooltip } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
HoverHello Skeleton
);
}
```
## Anatomy
Here's an overview of how the Tooltip component is structured in code:
```tsx
import { Tooltip, Portal } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference