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

• Host: GitHub
• URL: https://github.com/MarvinKlein1508/BlazorTooltips
• Owner: MarvinKlein1508
• License: mit
• Created: 2023-01-20T10:18:02.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-09-04T12:35:05.000Z (about 1 year ago)
• Last Synced: 2024-06-21T18:15:38.960Z (5 months ago)
• Topics: blazor, blazor-server, blazor-webassembly, bootstrap, tooltips
• Language: HTML
• Homepage:
• Size: 19.6 MB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

• awesome-blazor - BlazorTooltips -  An implementation of Bootstrap tooltips for both Blazor Server and WebAssembly. [Demo](https://marvinklein1508.github.io/BlazorTooltips). (Libraries & Extensions / 2D/3D Rendering engines)

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.