Simple tooltips made of pure CSS.

Github Project Download CSS

Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS. See how easy it is:

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.

<button aria-label="Whats up!" data-balloon-pos="up">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="left">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="right">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="down">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="up-left">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="up-right">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="down-left">Hover me!</button>
<button aria-label="Whats up!" data-balloon-pos="down-right">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" aria-label="Hi." data-balloon-pos="up">I'm a medium tooltip</button>
<button data-balloon-length="medium" aria-label="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" aria-label="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" aria-label="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" aria-label="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>

Disabling animation

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

<button data-balloon-blunt aria-label="No animation!" data-balloon-pos="up">No animation!</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 aria-label="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.

Customizing Tooltips

Balloon.css exposes three CSS variables to make it easier to customize tooltips: --balloon-color, --balloon-font-size and --balloon-move. This way you can use custom CSS to make your own tooltip styles:

/* Add this to your CSS */
.tooltip-red {
  --balloon-color: red;
}

.tooltip-big-text {
  --balloon-font-size: 20px;
}

.tooltip-slide {
  --balloon-move: 30px;
}
<button aria-label="I am red!" class="tooltip-red">I am red!</button>
<button aria-label="I have big text!" class="tooltip-big-text">I have big text!</button>
<button aria-label="I move a lot!" class="tooltip-slide">I move a lot!</button>

You can combine classes to achieve multiple customization. If you want to customize tooltips globally, use the :root selector:

/* All tooltips would now be blue */
:root {
  --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:

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

How to use

You can import the CSS using a CDN:

<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">

Or download it in GitHub and load it locally:

<link rel="stylesheet" href="your/assets/balloon.min.css">

If you're using npm, simply do:


npm i balloon-css --save


And then import in your JS file:


import 'balloon-css';


With npm you can also link directly to the SASS/SCSS file if you want to:


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


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.