# SbTooltip

A lightweight tooltip component that appears on hover or focus to provide additional information.

## Parameters

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| Text | string? | null | Simple text tooltip content |
| Placement | SbPlacement | Top | Tooltip placement |
| Delay | int | 200 | Delay before showing (ms) |
| HideDelay | int | 0 | Delay before hiding (ms) |
| MaxWidth | string? | null | Maximum width of tooltip |
| AdditionalAttributes | Dictionary\<string, object\>? | null | Additional HTML attributes |

## Templates / Slots

| Slot | Type | Description |
|------|------|-------------|
| ChildContent | RenderFragment | Content to wrap with tooltip |
| Content | RenderFragment | Rich tooltip content (replaces Text) |

## CSS Classes

- `sb-tooltip-wrapper` - Wrapper element
- `sb-tooltip` - Tooltip container
- `sb-tooltip--{placement}` - Placement variants

## Accessibility

- Uses `role="tooltip"` on the tooltip element
- `aria-hidden` toggles with visibility

## Examples

### Basic Usage

```razor
<SbTooltip Text="Click to save your changes">
    <SbButton>Save</SbButton>
</SbTooltip>
```

### Different Placements

```razor
<SbTooltip Text="Top tooltip" Placement="SbPlacement.Top">
    <SbButton>Top</SbButton>
</SbTooltip>

<SbTooltip Text="Right tooltip" Placement="SbPlacement.End">
    <SbButton>Right</SbButton>
</SbTooltip>

<SbTooltip Text="Bottom tooltip" Placement="SbPlacement.Bottom">
    <SbButton>Bottom</SbButton>
</SbTooltip>

<SbTooltip Text="Left tooltip" Placement="SbPlacement.Start">
    <SbButton>Left</SbButton>
</SbTooltip>
```

### With Delay

```razor
<SbTooltip Text="Slow tooltip" Delay="500">
    <SbButton>Hover me</SbButton>
</SbTooltip>

<SbTooltip Text="Instant tooltip" Delay="0">
    <SbButton>Instant</SbButton>
</SbTooltip>
```

### Rich Content

```razor
<SbTooltip>
    <Content>
        <SbStack Gap="2">
            <SbText Weight="semibold">Keyboard Shortcut</SbText>
            <SbText Size="sm">Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save</SbText>
        </SbStack>
    </Content>
    <ChildContent>
        <SbButton>Save</SbButton>
    </ChildContent>
</SbTooltip>
```

### Icon Button Tooltips

```razor
<SbStack Direction="SbStackDirection.Row" Gap="1">
    <SbTooltip Text="Edit">
        <SbIconButton Icon="edit" OnClick="Edit" />
    </SbTooltip>
    
    <SbTooltip Text="Delete">
        <SbIconButton Icon="trash" Color="SbColor.Danger" OnClick="Delete" />
    </SbTooltip>
    
    <SbTooltip Text="Share">
        <SbIconButton Icon="share" OnClick="Share" />
    </SbTooltip>
</SbStack>
```

### With Max Width

```razor
<SbTooltip MaxWidth="200px">
    <Content>
        This is a longer tooltip that will wrap when it exceeds the maximum width setting.
    </Content>
    <ChildContent>
        <SbIcon Name="info" />
    </ChildContent>
</SbTooltip>
```

### Icon rail tooltips

In an icon rail (e.g. Wish theme's `WishIconRail`), wrap nav items with `SbTooltip` and `Placement="SbPlacement.End"` so the tooltip appears to the right:

```razor
<SbStack Direction="SbStackDirection.Column" Gap="1">
    <SbTooltip Text="Home" Placement="SbPlacement.End">
        <SbNavItem Href="/" Icon="home" />
    </SbTooltip>
    <SbTooltip Text="Dashboard" Placement="SbPlacement.End">
        <SbNavItem Href="/dashboard" Icon="layout" />
    </SbTooltip>
    <SbTooltip Text="Settings" Placement="SbPlacement.End">
        <SbNavItem Href="/settings" Icon="settings" />
    </SbTooltip>
</SbStack>
```

### Disabled Element Tooltip

```razor
<SbTooltip Text="You don't have permission to delete">
    <span>
        <SbButton Disabled="true">Delete</SbButton>
    </span>
</SbTooltip>
```

### With Hide Delay

```razor
<SbTooltip Text="I stay visible longer" HideDelay="500">
    <SbButton>Hover me</SbButton>
</SbTooltip>
```

### Form Field Help

```razor
<SbStack Gap="4">
    <SbStack Direction="SbStackDirection.Row" Gap="2" Align="SbAlign.End">
        <SbTextField Label="API Key" @bind-Value="apiKey" />
        <SbTooltip Placement="SbPlacement.End">
            <Content>
                <SbStack Gap="1" Style="max-width: 250px">
                    <SbText Weight="semibold">API Key</SbText>
                    <SbText Size="sm">
                        Your API key is used to authenticate requests.
                        Keep it secure and never share it publicly.
                    </SbText>
                    <SbLink Href="/docs/api-keys" Size="sm">Learn more</SbLink>
                </SbStack>
            </Content>
            <ChildContent>
                <SbIcon Name="help-circle" Size="SbSize.Sm" Color="SbColor.Muted" />
            </ChildContent>
        </SbTooltip>
    </SbStack>
</SbStack>
```