https://github.com/soenneker/soenneker.blazor.floating.tooltips
A modern Blazor interop library for Floating UI-powered tooltips
https://github.com/soenneker/soenneker.blazor.floating.tooltips
blazor blazorlibrary csharp dotnet floating floating-ui floatingtooltip tooltips ui
Last synced: 4 days ago
JSON representation
A modern Blazor interop library for Floating UI-powered tooltips
- Host: GitHub
- URL: https://github.com/soenneker/soenneker.blazor.floating.tooltips
- Owner: soenneker
- License: mit
- Created: 2025-04-11T14:36:43.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-04-14T18:54:19.000Z (3 months ago)
- Last Synced: 2026-04-14T20:28:36.620Z (3 months ago)
- Topics: blazor, blazorlibrary, csharp, dotnet, floating, floating-ui, floatingtooltip, tooltips, ui
- Language: CSS
- Homepage: https://soenneker.com
- Size: 1.29 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/soenneker.blazor.floating.tooltips/)
[](https://github.com/soenneker/soenneker.blazor.floating.tooltips/actions/workflows/publish-package.yml)
[](https://www.nuget.org/packages/soenneker.blazor.floating.tooltips/)
[](https://soenneker.github.io/soenneker.blazor.floating.tooltips/)
[](https://github.com/soenneker/soenneker.blazor.floating.tooltips/actions/workflows/codeql.yml)
# 
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](https://floating-ui.com/) to provide position-aware, customizable, and interactive tooltips with a C# API.
[Open the demo site](https://soenneker.github.io/soenneker.blazor.floating.tooltips/)
---
## 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
```bash
dotnet add package Soenneker.Blazor.Floating.Tooltips
```
Register the service:
```csharp
using Soenneker.Blazor.Floating.Tooltips.Registrars;
builder.Services.AddFloatingTooltipAsScoped();
```
Add the namespace where you use the components:
```razor
@using Soenneker.Blazor.Floating.Tooltips
@using Soenneker.Blazor.Floating.Tooltips.Enums
@using Soenneker.Blazor.Floating.Tooltips.Options
```
---
## Usage
Basic tooltip with plain text:
```razor
Hover me
```
Tooltip with options and event callbacks:
```razor
Hover over me
@code {
private void HandleShow() => Console.WriteLine("Tooltip shown");
private void HandleHide() => Console.WriteLine("Tooltip hidden");
}
```
Rich content with `TooltipContent`:
```razor
Smart Tooltip
Rich content goes here.
Hover me
```
---
## Options
You can set options through `FloatingTooltipOptions`:
```razor
@using Soenneker.Blazor.Floating.Tooltips.Enums
@using Soenneker.Blazor.Floating.Tooltips.Options
Hover me
@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:
```razor
Hover me
```
`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:
```razor
Toggle tooltip
@code {
private FloatingTooltip? _tooltip;
private async Task ToggleTooltip()
{
if (_tooltip is not null)
await _tooltip.Toggle();
}
}
```
Available methods:
```csharp
await tooltip.Show();
await tooltip.Hide();
await tooltip.Toggle();
```