balloon-css
Advanced tools
Comparing version
{ | ||
"name": "balloon-css", | ||
"version": "0.3.0", | ||
"version": "0.4.0", | ||
"description": "Simple tooltips made of pure CSS", | ||
@@ -5,0 +5,0 @@ "author": "Claudio Holanda", |
@@ -10,2 +10,8 @@ [](https://www.npmjs.com/package/balloon-css) | ||
## Demo & Playground | ||
You can play with Balloon.css here: https://jsfiddle.net/9fboea3u/ | ||
You also can check more examples at the website: http://kazzkiq.github.io/balloon.css/ | ||
## Usage | ||
@@ -42,2 +48,13 @@ | ||
### Showing tooltips programatically | ||
If you want to show tooltips even when user interaction isn't happening, you can simply use the `data-balloon-visible` attribute: | ||
```html | ||
<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> | ||
``` | ||
### Glyphs and Icon Fonts | ||
@@ -44,0 +61,0 @@ You can also add any HTML special character to your tooltips, or even use third-party Icon fonts: |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
28838
6.85%177
1.72%88
23.94%