Soenneker.Blazor.Floating.Tooltips

⚡ A modern Blazor interop library for Floating UI-powered tooltips

🧪 Click here to try the demo

Soenneker.Blazor.Floating.Tooltips is a fully featured Blazor component library that integrates with Floating UI to provide sleek, customizable, and highly interactive tooltips using a pure C# API.

---

✨ Features

• ✅ Position-aware and collision-resistant tooltips
• 🎯 Custom placements, delays, and themes
• 🧲 Interactive and manually triggered tooltips
• 🎨 Dark/light theming with optional arrows
• 🔧 Full control via C# with event callbacks
• 🪶 Lightweight with optional CDN usage
• 🔁 Runtime toggle, show, and hide support
• 💥 Optimized for performance and resilience

---

📦 Installation

dotnet add package Soenneker.Blazor.Floating.Tooltips

Register:

services.AddFloatingTooltipAsScoped();

---

🛠️ Usage

Basic example with plain string content:

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

With full options and event handling:

<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!");
}

Using TooltipContent instead of Text:

<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 use the Options parameter or inline params:

Options = new FloatingTooltipOptions
{
    Animate = true,
    ShowArrow = true,
    Theme = FloatingTooltipTheme.Light,
    MaxWidth = 250,
    ManualTrigger = false,
    UseCdn = true
}

Or shorthand:

Animate="true" Theme="FloatingTooltipTheme.Dark"

---

🧩 Interop Methods

You can control tooltips programmatically via:

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