https://github.com/soenneker/soenneker.blazor.tippy

A Blazor interop library for Tippy.js
https://github.com/soenneker/soenneker.blazor.tippy

blazor csharp dotnet interop javascript js popper tippy tippyinterop tippyjs tooltip

Last synced: 17 days ago
JSON representation

A Blazor interop library for Tippy.js

• Host: GitHub
• URL: https://github.com/soenneker/soenneker.blazor.tippy
• Owner: soenneker
• License: mit
• Created: 2024-10-06T00:59:09.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-29T10:39:02.000Z (2 months ago)
• Last Synced: 2024-10-29T12:35:30.210Z (2 months ago)
• Topics: blazor, csharp, dotnet, interop, javascript, js, popper, tippy, tippyinterop, tippyjs, tooltip
• Language: C#
• Homepage: https://soenneker.com
• Size: 110 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![](https://img.shields.io/nuget/v/soenneker.blazor.tippy.svg?style=for-the-badge)](https://www.nuget.org/packages/soenneker.blazor.tippy/)

[![](https://img.shields.io/github/actions/workflow/status/soenneker/soenneker.blazor.tippy/publish-package.yml?style=for-the-badge)](https://github.com/soenneker/soenneker.blazor.tippy/actions/workflows/publish-package.yml)

[![](https://img.shields.io/nuget/dt/soenneker.blazor.tippy.svg?style=for-the-badge)](https://www.nuget.org/packages/soenneker.blazor.tippy/)

# ![](https://user-images.githubusercontent.com/4441470/224455560-91ed3ee7-f510-4041-a8d2-3fc093025112.png) 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`)

```csharp

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

```razor

@using Soenneker.Blazor.Masonry.Abstract

@inject ITippyInterop TippyInterop

Hover me!


@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);

            }

        }

}

```