# Tooltip

## Example

```svelte
<script>
	import { Tooltip, Button, toast } from '@foxui/all';

	function handleClick() {
		toast.error("Don't click, just hover!");
	}
</script>

<div class="flex w-full flex-col items-start gap-2 py-12">
	<Tooltip text="Hello there!" withContext>
		{#snippet child({ props })}
			<Button {...props} onclick={handleClick}>Hover me</Button>
		{/snippet}
	</Tooltip>
</div>
```

## Documentation

## Usage

```svelte
<Tooltip text="Hello there!" withContext>
	{#snippet child({ props })}
		<Button {...props} onclick={handleClick}>Hover me</Button>
	{/snippet}
</Tooltip>
```

## Sources

This component uses the bits-ui component: Tooltip, see here for the documentation for that: https://bits-ui.com/docs/components/tooltip/llms.txt

## API Reference

### Tooltip
A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it. Built on top of the bits-ui Tooltip primitive.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| open | `boolean` | `false` | Whether the tooltip is open. (bindable) |
| text | `string` | `-` | Simple text content for the tooltip. Use this for plain text tooltips. |
| content | `Snippet` | `-` | A snippet for custom tooltip content. Use this instead of text for rich content. |
| child | `Snippet` | `-` | A snippet for custom trigger rendering. The trigger element that the tooltip is anchored to. |
| withContext | `boolean` | `false` | Whether to use a context menu-style tooltip (right-click triggered). |
| triggerProps | `Tooltip.TriggerProps` | `-` | Additional props to pass to the underlying Tooltip.Trigger component. |
| contentProps | `Tooltip.ContentProps` | `-` | Additional props to pass to the underlying Tooltip.Content component (positioning, collision, etc.). |
| onOpenChange | `(open: boolean) => void` | `-` | A callback invoked when the open state changes. |
| onOpenChangeComplete | `(open: boolean) => void` | `-` | A callback invoked after the open/close transition completes. |
| disabled | `boolean` | `false` | Whether the tooltip is disabled. |
| delayDuration | `number` | `700` | The delay in milliseconds before the tooltip opens on hover. |
| disableHoverableContent | `boolean` | `false` | Whether hovering over the tooltip content keeps it open. |
| disableCloseOnTriggerClick | `boolean` | `false` | Whether clicking the trigger closes the tooltip. |
| ignoreNonKeyboardFocus | `boolean` | `false` | Whether to ignore non-keyboard focus events (e.g. mouse focus). |