Soenneker.Blazor.Tippy

A Blazor interop library for Tippy.js

Installation

dotnet add package Soenneker.Blazor.Tippy

Usage

1. Register the interop within DI (Program.cs)

public static async Task Main(string[] args)
{
    ...
    builder.Services.AddTippy();
}

Scripts and styles will get dynamically and lazily loaded for you.

2. Inject ITippyInterop within your App.Razor file

@using Soenneker.Blazor.Masonry.Abstract
@inject ITippyInterop TippyInterop

<div id="tooltipElement">Hover me!</div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                var options = new TippyOptions
                {
                    Content = "This is a tooltip!",
                    Theme = "light",
                    Interactive = true,
                    Trigger = "click",
                    Placement = "bottom"
                };

                // Initialize the Tippy tooltip on the element
                await TippyInterop.Init("tooltipElement", options);
            }
        }
}