Download
Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS. By default, tooltips will always remain single-line no matter their length. You can change this behavior by using the attribute data-balloon-length with one of the values, small, medium, large or fit. If for some reason you do not want animations in your tooltips, you can use the data-balloon-blunt attribute for that. If you want to show tooltips even when user interaction isn't happening, you can simply use the data-balloon-visible attribute. The attribute data-balloon-visible can be easily added via JavaScript (e.g. .setAttribute()), enabling you to show tooltips whenever needed. Balloon.css exposes three CSS variables to make it easier to customize tooltips. his way you can use custom CSS to make your own tooltip styles.
Features
- Balloon.css lets you add tooltips to elements without JavaScript
- Just requires a few lines of CSS
- Make your own tooltip styles
- You can combine classes to achieve multiple customization
- You can also add any HTML special character to your tooltips
- Tooltips will always remain single-line no matter their length
Project Samples
