> ## Documentation Index
> Fetch the complete documentation index at: https://neo.tvk.company/llms.txt
> Use this file to discover all available pages before exploring further.

# Tooltip

> A contextual overlay that displays helpful information when users hover over a widget.

## Example

<Frame caption="Basic tooltip with a button as a trigger.">
  <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/overlays/tooltip/tooltip_basic_light.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=1db2d7dedf63acdcb3ce40303b120b21" alt="Basic tooltip example" noZoom className="block dark:hidden" width="1536" height="384" data-path="images/widgets/overlays/tooltip/tooltip_basic_light.png" />

  <img src="https://mintcdn.com/tvk/M1ZGdn8TY0ukkJe8/images/widgets/overlays/tooltip/tooltip_basic_dark.png?fit=max&auto=format&n=M1ZGdn8TY0ukkJe8&q=85&s=e0718292606908e766324089cec08ea3" alt="Basic tooltip example" noZoom className="hidden dark:block" width="1536" height="384" data-path="images/widgets/overlays/tooltip/tooltip_basic_dark.png" />
</Frame>

<CodeGroup>
  ```dart Basic Usage lines theme={null}
  NeoTooltip(
    label: "I'm a helpful tooltip",
    child: NeoButton(
      variant: .outlined,
      label: "Hover me",
      onPressed: () {},
    ),
  ),
  ```
</CodeGroup>

## Properties

### Required

<ParamField path="label" type="String" required>
  The text label to display in the tooltip.
</ParamField>

<ParamField path="child" type="Widget" required>
  The widget that triggers the tooltip on <Tooltip tip="Long press on mobile">hover</Tooltip>.
</ParamField>

### Layout

<ParamField path="position" type="NeoTooltipPosition" default="NeoTooltipPosition.top">
  The position where the tooltip appears relative to the child widget.
</ParamField>

### Behavior

<ParamField path="delay" type="Duration" default="Duration(seconds: 1)">
  The delay before showing the tooltip on hover. Does not affect long press behavior on mobile.
</ParamField>

## Enums

### NeoTooltipPosition

Position where the tooltip appears relative to the child widget.

* `top`: Tooltip appears above the child
* `right`: Tooltip appears to the right of the child
* `bottom`: Tooltip appears below the child
* `left`: Tooltip appears to the left of the child

## Best Practices

* **Accessibility**: Tooltips are essential for icon-only buttons and helpful for providing additional context.

## Integration Notes

* **Interaction Methods**:
  * **Desktop**: Hover to show tooltip after the specified delay
  * **Mobile**: Long press to show tooltip immediately
* **Dismissal**: Tooltips automatically hide when:
  * Mouse leaves the child area (desktop)
  * User taps outside the tooltip (mobile, after long press)
  * User performs other interactions