Star

Simple tooltips made of pure CSS

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

Github Project Download CSS

Positioning

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>

Length

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.

<button data-balloon-length="small" data-balloon="Hi." data-balloon-pos="up">Hover me!</button>
<button data-balloon-length="medium" data-balloon="Now that's a super big text we have over here right? Lorem ipsum dolor sit I'm done." data-balloon-pos="up">I'm a medium tooltip.</button>
<button data-balloon-length="large" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a large tooltip</button>
<button data-balloon-length="xlarge" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">I'm a Xlarge tooltip</button>
<button data-balloon-length="fit" data-balloon="What about something really big? This may surpass your window dimensions. Imagine you're on that boring class with that boring teacher and you didn't slept so well last night. Suddenly you're sleeping in class. Can you believe it?!" data-balloon-pos="up">My width will fit to element</button>

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:

<button data-balloon-visible data-balloon="I am always visible!" data-balloon-pos="up">Always visible!</button>

The attribute data-balloon-visible can be easily added via JavaScript (e.g. .setAttribute()), enabling you to show tooltips whenever needed.

Glyphs and Icon Fonts

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

<button data-balloon="HTML special characters: &#9787; &#9986; &#9820;" data-balloon-pos="up">Hover me!</button>
<button data-balloon="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</button>
<button class="font-awesome" data-balloon="Font Awesome: &#xf030; &#xf133; &#xf1fc; &#xf03e; &#xf1f8;" data-balloon-pos="up">Hover me!</button>

How to use

Simply call Balloon.css to your HTML:

<link rel="stylesheet" href="path/to/balloon.css">

Alternatively, you can use it via CDN (provided by cdnjs):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">

And add the attributes data-balloon and data-balloon-pos to your HTML elements:

<span data-balloon="I'm a tooltip." data-balloon-pos="up">Blablabla</span>

Drawbacks

Balloon.css make use of pseudo-elements thus self-closing elements such as <img>, <input> and <hr> will not render tooltips.

Also keep in mind that if pseudo elements are already in use on an element, the tooltip will conflict with them resulting in potential bugs.