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 />

Default

Side Variations

With Icons

Placement

Side — interactive

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

Tooltip / TooltipTrigger

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