# Tooltip

Source: https://lumeo.nativ.sh/components/tooltip

# Tooltip

A popup that displays information related to an element when the element receives hover focus.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Tooltip />

Preview Code

Default

Hover me

Preview Code

Side Variations

Top

Right

Bottom

Left

Preview Code

With Icons

Preview Code

Placement

Top

Bottom

Left

Right

Preview Code

Side — interactive

Pick a value to see it applied live. Hover the button to see the tooltip appear on the selected side.

Top Right Bottom Left

Hover me (Top)

**Viewport-edge collision.** Tooltips auto-flip near viewport edges via `position: fixed` + collision detection — a tooltip with `Side="Lumeo.Side.Top"` placed near the top of the viewport will flip to the bottom instead of being clipped. No API change; the behaviour is automatic.

## Parameter Coverage

Hover each trigger to see the tooltip rendered with every Lumeo.Side value, plus the ShowArrow bool.

### Side

Top

Hover (Top)

Right

Hover (Right)

Bottom

Hover (Bottom)

Left

Hover (Left)

### ShowArrow

ShowArrow = false

No arrow

ShowArrow = true

With arrow

## API Reference

### TooltipContent

Property

Type

Default

Description

Side

Lumeo.Side

Top

Which side of the trigger the tooltip appears on. Values: Top, Bottom, Left, Right.

Offset

int

8

Pixel gap between the trigger and tooltip.

ShowArrow

bool

true

Renders a small arrow pointing back at the trigger.

### Tooltip / TooltipTrigger

Property

Type

Default

Description

Tooltip is a group container using CSS group-hover. TooltipTrigger wraps the element that triggers the tooltip on hover.

ShowDelay

int

200

Tooltip — milliseconds to wait before showing on hover/focus.

HideDelay

int

0

Tooltip — milliseconds to wait before hiding on pointer-leave.