Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.
Using npm:
npm install balloon-css
CDN version (provided by cdnjs):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.2.4/balloon.min.css">
Manually:
Simply download balloon.min.css
from this repo and add it to your HTML. e.g.
<link rel="stylesheet" href="path/to/balloon.min.css">
For positioning, use data-balloon-pos
attribute with one of the values: up
, down
, left
or right
:
<button data-balloon="Whats up!" data-balloon-pos="up">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="left">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="right">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="down">Hover me!</button>
If you want to show tooltips even when user interaction isn't happening, you can simply use the data-balloon-visible
attribute:
<button data-balloon="Whats up!" data-balloon-pos="up" id="show-tip">Hover me!</button>
<script>
const btn = document.getElementById('show-tip')
btn.setAttribute('data-balloon-visible', '')
</script>
You can also add any HTML special character to your tooltips, or even use third-party Icon fonts:
<button data-balloon="HTML special characters: ☻ ✂ ♜" data-balloon-pos="up">Hover me!</button>
<button data-balloon="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</button>
Example using Font Awesome:
<button class="fa" data-balloon="Font Awesome:     " data-balloon-pos="up">Hover me!</button>
Balloon.css is mantained in SASS and LESS. To contribute with bugfixes and enchancements you must follow this steps:
- Clone repo. E.g.
git clone https://github.com/kazzkiq/balloon.css.git
- Run
npm install
- Edit SASS/LESS files and run
npm run build-all
to generate the production CSS files. (alternatively you can runbuild-sass
orbuild-less
for specific compiling). - Make sure to test the production files over the website (branch
gh-pages
) before submitting a Pull Request.
Note 1: Remember to update both SASS and LESS files after your changes (both must always be in sync).
Note 2: You're not obligated to use the built-in tasks from the above steps. If you're using your own build, just make sure to update production and source files before submitting a PR.
Made by Claudio Holanda (@kazzkiq)