---
title: Tooltip
description: Anchored tooltips with configurable side, alignment, and panel styling.
---

Use tooltips for short, contextual explanations that appear near an anchor.

<UiDemo id="tooltip" />

## Installation

<Tabs>
<Tab title="Gradle">
```kotlin title="app/build.gradle.kts"
implementation("com.composables:ui:0.1.0")
```
</Tab>
<Tab title="Copy & Paste">
#### Add the required dependencies

```kotlin title="app/build.gradle.kts"
implementation("com.composables:composeunstyled:2.7.0")
```

#### Copy and paste the following sources into your project

<ComponentSource file="components/Tooltip.kt" />
<ComponentSource file="components/Utils.kt" />
</Tab>
</Tabs>

## Examples

### Side

<UiDemo id="tooltip-side" />

### Alignment

<UiDemo id="tooltip-alignment" />

### Hover delay

<UiDemo id="tooltip-hover-delay" />

### Long press duration

<UiDemo id="tooltip-long-press-duration" />

## API Reference

### Tooltip

An anchored tooltip with configurable placement and timing.

```kotlin
@Composable
fun Tooltip(
    enabled: Boolean = true,
    side: TooltipSide = TooltipSide.Top,
    alignment: TooltipAlignment = TooltipAlignment.Center,
    sideOffset: Dp = 8.dp,
    alignmentOffset: Dp = 0.dp,
    longPressShowDurationMillis: Long = 1500L,
    hoverDelayMillis: Long = 0L,
    panel: @Composable TooltipScope.() -> Unit,
    anchor: @Composable () -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `enabled` | `Boolean` | Whether the tooltip can be shown. |
| `side` | `TooltipSide` | Side of the anchor where the tooltip should appear. |
| `alignment` | `TooltipAlignment` | Alignment of the tooltip along the chosen side. |
| `sideOffset` | `Dp` | Distance between the tooltip and its anchor. |
| `alignmentOffset` | `Dp` | Offset applied along the anchor edge. |
| `longPressShowDurationMillis` | `Long` | Duration to keep the tooltip visible after a long press. |
| `hoverDelayMillis` | `Long` | Delay before showing the tooltip on hover. |
| `panel` | `@Composable TooltipScope.() -> Unit` | Composable tooltip panel content. |
| `anchor` | `@Composable () -> Unit` | Composable anchor that triggers the tooltip. |

### TooltipPanel

A styled tooltip surface drawn near the anchor.

```kotlin
@Composable
fun TooltipScope.TooltipPanel(
    modifier: Modifier = Modifier,
    shape: Shape = RoundedCornerShape(6.dp),
    backgroundColor: Color = Theme[colors][panelColor],
    contentColor: Color = Theme[colors][onPanelColor],
    outlineColor: Color = Theme[colors][borderColor],
    contentPadding: PaddingValues = PaddingValues(horizontal = 10.dp, vertical = 6.dp),
    enter: EnterTransition? = null,
    exit: ExitTransition? = null,
    content: @Composable () -> Unit,
)
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `modifier` | `Modifier` | Modifier applied to the component. |
| `shape` | `Shape` | Shape used for the tooltip panel. |
| `backgroundColor` | `Color` | Background color used for the tooltip panel. |
| `contentColor` | `Color` | Color used for tooltip content. |
| `outlineColor` | `Color` |  |
| `contentPadding` | `PaddingValues` | Padding applied inside the tooltip panel. |
| `enter` | `EnterTransition?` | Transition used when the tooltip appears. |
| `exit` | `ExitTransition?` | Transition used when the tooltip disappears. |
| `content` | `@Composable () -> Unit` | Composable content displayed by the component. |

### TooltipSide

Side options for tooltip placement relative to its anchor.

```kotlin
@JvmInline
value class TooltipSide internal constructor(private val value: Int)
```

| Value | Description |
|-------|-------------|
| `Top` | Places the tooltip above its anchor. |
| `Bottom` | Places the tooltip below its anchor. |
| `Start` | Places the tooltip before its anchor in the layout direction. |
| `End` | Places the tooltip after its anchor in the layout direction. |

### TooltipAlignment

Alignment options for tooltip placement along the anchor edge.

```kotlin
@JvmInline
value class TooltipAlignment internal constructor(private val value: Int)
```

| Value | Description |
|-------|-------------|
| `Start` | Aligns the tooltip to the start edge of the anchor. |
| `Center` | Centers the tooltip against the anchor. |
| `End` | Aligns the tooltip to the end edge of the anchor. |