Tooltip
A popup that displays information related to an element when the element receives hover focus.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Tooltip />
Pick a value to see it applied live. Hover the button to see the tooltip appear on the selected side.
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
Right
Bottom
Left
ShowArrow
ShowArrow = false
ShowArrow = true
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. |