Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/MarvinKlein1508/BlazorTooltips

A simple to use tooltip component based on bootstrap for both Blazor Server and WebAssembly
https://github.com/MarvinKlein1508/BlazorTooltips

blazor blazor-server blazor-webassembly bootstrap tooltips

Last synced: 3 months ago
JSON representation

A simple to use tooltip component based on bootstrap for both Blazor Server and WebAssembly

Awesome Lists containing this project

README

        

# BlazorTooltips
A simple to use blazor component to implement bootstrap tooltips in both Blazor server and Blazor WebAssembly apps. Based on Bootstrap.

See a live [demo](https://marvinklein1508.github.io/BlazorTooltips/) right here on github.

## What's the difference between the default bootstrap tooltips?
The component is designed to manage the disposing of the tooltips. Once the component is not rendered anymore, it will be automatically disposed and hide the tooltip completely automatically.

With the vanilla implementation of Bootstrap tooltips you'll end up with an open tooltip after the page has navigated the user to a different component.

Moreover it provides you with nice intellisense, so you'll don't need to remember every attribute.

## Requirements
The bootstrap.min.js must be included in your project.

In blazor server you can add it within your `_Host.cshtml` file

```html

```

In Blazor WebAssembly you'll need to add it to your `index.html`

```html

```

## Installation

You can install from Nuget using the following command:

`Install-Package BlazorTooltips`

Or via the Visual Studio package manger.

## Basic usage
Start by add the following using statement to your root `_Imports.razor`.

@using BlazorTooltips

You can wrap the tooltip component around any HTML or blazor component. For example:
```csharp

Default Tooltip

```

By default all tooltips will be shown on hover with a fade animation and placed on top. You can change this behaviour if you want like this:
```csharp

Advanced tooltip

```

The component also provides native support for HTML tooltips. If you don't want to show HTML within your tooltips you can disable this feature by setting `Html` to `false`

```csharp

Tooltip with HTML

```

You can override almost any available option from this component by passing it down to the corresponding parameter.