Balloon.css – Simple tooltips made from pure CSS

Balloon.css
I haven’t used this myself yet but was happy to see it on offer. Truthfully I’m selfishly blogging about it here so I can come back when it’s needed.

If you want to create tooltips (the popups that appear when hovering over with your mouse—see above graphic) Balloon.css looks to be pretty simple. You can adjust positioning, size and include icon fonts should you wish. I’ve used a similar tooltip effect for the website design images on my portfolio page.

The only caveats for using Balloon.css as their page states are as follows:

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.

Something else to keep in mind is that not all user these days are using a mouse and therefore there are no hover states.

Visit Balloon.css and go create something wonderful. Thanks for sharing this Claudio!

Edit: It should be noted that data-attribute content won’t be indexed for SEO. Mozilla Developer Network has this to say:

Do not store content that should be visible and accessible in data attributes, because assistive technology may not access them. In addition, search crawlers may not index data attributes’ values.

Tags: , , ,

Leave a Reply

Other tags used in my blog:

 (1)  (6)  (1)  (16)  (1)  (1)  (17)  (1)  (17)  (1)  (1)  (7)  (1)  (4)  (16)  (5)  (2)  (29)  (9)  (1)  (12)  (4)  (1)  (4)  (5)  (9)  (1)  (6)  (1)  (4)  (1)  (1)  (1)  (3)  (1)  (3)  (4)  (7)  (3)  (3)  (4)  (1)  (1)  (2)  (1)  (7)  (11)  (13)  (2)  (6)  (1)  (3)  (16)  (2)  (3)  (1)  (5)  (1)  (29)  (4)  (4)  (9)