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> Hover me!

<button aria-label="Whats up!" data-balloon-pos="left">Hover me!</button> Hover me!

<button aria-label="Whats up!" data-balloon-pos="right">Hover me!</button> Hover me!

<button aria-label="Whats up!" data-balloon-pos="down">Hover me!</button> Hover me!

<button aria-label="Whats up!" data-balloon-pos="up-left">Hover me!</button> Hover me!

<button aria-label="Whats up!" data-balloon-pos="up-right">Hover me!</button> Hover me!

<button aria-label="Whats up!" data-balloon-pos="down-left">Hover me!</button> Hover me!

<button aria-label="Whats up!" data-balloon-pos="down-right">Hover me!</button> Hover me!

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">Hover me!</button> I'm a small tooltip

<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> I'm a medium tooltip.

<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> I'm a large tooltip

<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> I'm a Xlarge tooltip

<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> My width will fit to element

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> No animation!

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> Always visible!

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> I am red!

<button aria-label="I have big text!" class="tooltip-big-text">I have big text!</button> I have big text!

<button aria-label="I move a lot!" class="tooltip-slide">I move a lot!</button> I move a lot!

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: ☻ ✂ ♜" data-balloon-pos="up">Hover me!</button> Hover me!

<button aria-label="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</button> Hover me!