Skip to content
OVERLAYS · FREE

Tooltip

A short hint on hover or focus, without a script.

A short hint on hover and on keyboard focus. It is pure CSS, so it works even before the page becomes interactive.

Why it helps

  • Hover and focus
  • No script needed
  • Accessible

Where it fits

  • Icon buttons
  • Abbreviations
  • Rail icons
Tooltip control in a RayCraft page

Example

<Stack Spacing="8" Wrap Style="padding:2rem">
    <Tooltip Text="Top (default)"><Button Variant="Variant.Outlined">Top</Button></Tooltip>
    <Tooltip Text="Bottom" Placement="TooltipPlacement.Bottom"><Button Variant="Variant.Outlined">Bottom</Button></Tooltip>
    <Tooltip Text="Left" Placement="TooltipPlacement.Left"><Button Variant="Variant.Outlined">Left</Button></Tooltip>
    <Tooltip Text="Right" Placement="TooltipPlacement.Right"><Button Variant="Variant.Outlined">Right</Button></Tooltip>
</Stack>

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Included in RayCraft Free. Working examples are in the GitHub repository (MIT); it holds example and demo code, not the library code.

All controls ยท Documentation