Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/kazzkiq/balloon.css

Simple tooltips made of pure CSS
https://github.com/kazzkiq/balloon.css

css html less sass tooltip

Last synced: about 1 month ago
JSON representation

Simple tooltips made of pure CSS

Lists

README 

        
[![npm version](https://badge.fury.io/js/balloon-css.svg)](https://www.npmjs.com/package/balloon-css)





  

  


  Balloon.css: Simple tooltips made of pure CSS.




## Simple tooltips made of pure CSS

Balloon.css lets you add tooltips to elements **without JavaScript** and in just a few lines of CSS.



It weights ~1.1kb minified (Brotli).





  




## Demo & Playground



You can play with Balloon.css here: https://jsfiddle.net/kuzmd942/



You also can check more examples at the website: https://kazzkiq.github.io/balloon.css/



## Usage



### Installation



**Using npm:**

```

npm install balloon-css

```



You can then import the CSS file directly into your JS (using Webpack, etc):



```js

// Your index.js file, etc.

import 'balloon-css';

```



or import the source file if using SASS/SCSS:



```sass

/* Your main.scss file, etc. */

@import "~balloon-css/src/balloon"

```



**CDN version:**



If you don't want to use npm, there is a CDN option:



```html



```



**Manually:**

Simply download [`balloon.min.css`](https://raw.githubusercontent.com/kazzkiq/balloon.css/master/balloon.min.css) from this repo and add it to your HTML. e.g.



```html



```



### Positioning

For positioning, use `data-balloon-pos` attribute with one of the values: `up`, `down`, `left`, `right`, `up-left`, `up-right`, `down-left` or `down-right`:



```html

Hover me!

Hover me!

Hover me!

Hover me!



Hover me!

Hover me!

Hover me!

Hover me!

```



### 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

Hover me!



  const btn = document.getElementById('show-tip')

  btn.setAttribute('data-balloon-visible', '')



```



### Disabling animation



If for some reason you do not want animations in your tooltips, you can use the `data-balloon-blunt` attribute for that.



```html

No animation!

```



### Customizing Tooltips



Balloon.css exposes CSS variables to make it easier to customize tooltips:



- `--balloon-border-radius`

- `--balloon-color`

- `--balloon-font-size`

- `--balloon-move`



This way, you can use custom CSS to make your own tooltip styles:



```css

/* Add this to your CSS */

.tooltip-red {

  --balloon-color: red;

}



.tooltip-big-text {

  --balloon-font-size: 20px;

}



.tooltip-slide {

  --balloon-move: 30px;

}

```



If you want to customize tooltips globally, use the `:root` selector:



```css

/* All tooltips would now be square and blue */

:root {

  --balloon-border-radius: 0;

  --balloon-color: blue;

}

```



### Glyphs and Icon Fonts

You can also add any HTML special character to your tooltips, or even use third-party Icon fonts:



```html

Hover me!

Hover me!

```



Example using [Font Awesome](https://fortawesome.github.io/Font-Awesome/):



```html

Hover me!

```



### Contributing

Balloon.css is mantained in SASS and LESS. To contribute with bugfixes and enchancements you must follow this steps:



1. Clone repo. E.g. `git clone https://github.com/kazzkiq/balloon.css.git`

2. Run `npm install`

3. Edit SASS file and run `npm run build` to generate the production CSS files.

4. Make sure to test the production files over the website (branch `gh-pages`) before submitting a Pull Request.



Note 1: Remember to update **the SASS file** instead of the generated ones (`balloon.css` and `balloon.min.css` are generated on every build from SASS file).



### Credits



Made by Claudio Holanda ([@kazzkiq](https://twitter.com/kazzkiq))