Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 - ![last commit](https://img.shields.io/github/last-commit/MarvinKlein1508/BlazorTooltips?style=flat-square&cacheSeconds=86400) 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:
```csharpDefault 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:
```csharpAdvanced 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.