Introduction
Introduction
Get Started
Get Started
How To
How To
Tryout
Tryout
Customize
Customize
About
About

About Tooltip Extension

Known Issues

  1. You can't use html directly inside a tooltip, you can use any valid unicode character though.
  2. If your tooltip is trapped behind something there are two possible culprits.
    1. The default z-index for tooltips is too low for the content you are trying to display over. Our default z-index is 9999.
    2. More likely scenario is your tooltip is inside something with an overflow to cut it off. If possible assign its parent to overflow: visible; or use the position classes to move the tooltip to a better location
  3. Some scenarios if a tooltip is added around other pseudo elements it could cause display issues, there is no easy fix; you will just have to play with the CSS around them.
  4. As these tooltips are using pseudo elements, self-closing elements such as <img>, <input>, <select> and <hr> cannot have content. For those elements, wrap them inside another <div> or <span> element and place the data-tooltip="content" there

Upcoming Features

  1. Separate delay into --tooltip-pre-delay and --tooltip-post-delay
  2. Allow dynamic coloring of tooltips by adding style like delay, style="--tooltip-color: #fff;"
  3. Add support for mdi-font library if there is one? class="has-tooltip-mdi" data=tooltip="[icon1unicode] is an icon! [icon2unicode"] is another icon!
  4. Add support for full html using an element style approach
    HTML content
  5. Add support for class="has-tooltip-click" to only show tooltip when it is clicked

Changelog

Jilael
2024-11-05
Updated Docs
Jilael
2024-11-04
Finished tooltip creation
Jilael
2024-10-18
Added Search Functionality
Jilael
2024-10-17
Improved responsiveness on mobile devices and GitHub Deployment
Jilael
2024-10-16
Setup Docs Site

About

Tooltip Extension Repository

Created by Versile modeling after the existing project Bulma CSS Tooltip Extensions and Hint.css. This code and all work contained within is available as Open Source and the MIT license. This project is not affiliated with Bulma, Hint.css, MudBlazor or any of the contributors to the project. We are not responsible for any issues that may arise from using this tool.