> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sure-developer.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tooltip

> Hover tooltip with text trigger or custom children

# Tooltip

`Tooltip` renders hover text above a trigger. If the component has children, those children become the trigger; otherwise it renders the `trigger` prop.

```lua theme={"dark"}
ui.tooltip({
  trigger = 'Hover hint',
  content = 'This tooltip is rendered by LUI without Radix.'
})
```

```lua theme={"dark"}
ui.tooltip({
  content = 'Save changes'
}, function()
  ui.button('Save', onSave)
end)
```

## API

<CodeGroup>
  ```lua Builder theme={"dark"}
  ui.tooltip(props, children?)
  ```

  ```lua Declarative theme={"dark"}
  lui.tooltip(props, children?)
  ```
</CodeGroup>

## Props

| Prop                                   | Type     | Description                                        |
| -------------------------------------- | -------- | -------------------------------------------------- |
| `content` or `label`                   | `string` | Tooltip body text.                                 |
| `trigger`                              | `string` | Fallback trigger text when no children are passed. |
| `triggerClassName`                     | `string` | Trigger span class.                                |
| `tooltipClassName`, `contentClassName` | `string` | Tooltip bubble class.                              |
| `className`, `style`                   | mixed    | Common LUI styling props.                          |

<Info>
  Tooltip visibility is CSS hover-based through the wrapper group class.
</Info>