👁 Image
Soenneker.Blazor.Floating.Tooltips 4.0.563

👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image
👁 alternate text is missing from this package README image

<img src="https://user-images.githubusercontent.com/4441470/224455560-91ed3ee7-f510-4041-a8d2-3fc093025112.png" alt="Logo" width="48"/> Soenneker.Blazor.Floating.Tooltips

Modern Blazor tooltips powered by Floating UI.

Soenneker.Blazor.Floating.Tooltips is a Blazor component library that integrates with Floating UI to provide position-aware, customizable, and interactive tooltips with a C# API.

Open the demo site

Features

• Position-aware and collision-resistant tooltip placement
• Custom placements, show/hide delays, themes, and arrows
• Interactive tooltip content
• Manual show, hide, and toggle support from C#
• Event callbacks for show and hide
• Optional CDN loading for Floating UI scripts
• Packaged static web assets for local script and stylesheet loading

Installation

dotnet add package Soenneker.Blazor.Floating.Tooltips

Register the service:

using Soenneker.Blazor.Floating.Tooltips.Registrars;

builder.Services.AddFloatingTooltipAsScoped();

Add the namespace where you use the components:

@using Soenneker.Blazor.Floating.Tooltips
@using Soenneker.Blazor.Floating.Tooltips.Enums
@using Soenneker.Blazor.Floating.Tooltips.Options

Usage

Basic tooltip with plain text:

<FloatingTooltip Text="Hello tooltip!">
 <button class="btn">Hover me</button>
</FloatingTooltip>

Tooltip with options and event callbacks:

<FloatingTooltip Text="This is an interactive tooltip"
 Placement="FloatingTooltipPlacement.Top"
 Animate="true"
 ShowArrow="true"
 Interactive="true"
 OnShow="HandleShow"
 OnHide="HandleHide"
 Theme="FloatingTooltipTheme.Dark">
 <span class="text-muted">Hover over me</span>
</FloatingTooltip>

@code {
 private void HandleShow() => Console.WriteLine("Tooltip shown");
 private void HandleHide() => Console.WriteLine("Tooltip hidden");
}

Rich content with TooltipContent:

<FloatingTooltip>
 <TooltipContent>
 <div class="p-2">
 <strong>Smart Tooltip</strong><br />
 Rich content goes here.
 </div>
 </TooltipContent>

 <button class="btn btn-primary">Hover me</button>
</FloatingTooltip>

Options

You can set options through FloatingTooltipOptions:

@using Soenneker.Blazor.Floating.Tooltips.Enums
@using Soenneker.Blazor.Floating.Tooltips.Options

<FloatingTooltip Text="Configured tooltip" Options="_options">
 <button>Hover me</button>
</FloatingTooltip>

@code {
 private readonly FloatingTooltipOptions _options = new()
 {
 Animate = true,
 ShowArrow = true,
 Theme = FloatingTooltipTheme.Light,
 MaxWidth = 250,
 ManualTrigger = false,
 UseCdn = true
 };
}

Or set the same values inline:

<FloatingTooltip Text="Inline options"
 Animate="true"
 Theme="FloatingTooltipTheme.Dark"
 ShowArrow="true">
 <button>Hover me</button>
</FloatingTooltip>

UseCdn defaults to true. When set to false, the library loads its bundled static web assets from _content/Soenneker.Blazor.Floating.Tooltips/..., which works with Blazor base paths such as GitHub Pages project sites.

Programmatic Control

Use @ref to control a tooltip manually:

<FloatingTooltip @ref="_tooltip"
 Text="Controlled manually"
 ManualTrigger="true">
 <button @onclick="ToggleTooltip">Toggle tooltip</button>
</FloatingTooltip>

@code {
 private FloatingTooltip? _tooltip;

 private async Task ToggleTooltip()
 {
 if (_tooltip is not null)
 await _tooltip.Toggle();
 }
}

Available methods:

await tooltip.Show();
await tooltip.Hide();
await tooltip.Toggle();