A long time ago if you called to develop a stylish tooltip or a message bubble with flexible content you would need a lot of time and images to create a stylish flex box. Now you just need one or two containers with some lines of CSS, no images and no javascript.

HINT.css

hint.css is written as a pure CSS resource using which you can create cool tooltips for your web app. It does not rely on JavaScript and rather uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. Also it uses BEM naming convention particularly for the modifiers.

Simtip

This is a css library to create simple and beauty tooltips with a lots of customize options.

CSS pointer-events and a pure CSS3 animating tooltip

The pointer-events property allows you to specifiy how the mouse interacts with the element it is touching. Although it was originally intended for SVG elements, browser support for pointer-events on other elements is pretty good, except for IE, which in some cases may not matter.

CSS3 tooltips

If your icon or button has insufficient text or none at all, or it just needs some additional explanation, then you surely need a CSS3 tooltip for it. Why’s that? Because, as they have proved till now, they can help you improve your website usability.

CSS3 Tooltip with Animation NO jQuery

I remember that CSS3 Animations are only visible in Firefox, Safari and Chrome, for the other browser the animations not function, but you will have always the tooltip effect, so can always be used in your projects.

The Tooltip

The Tooltip is a handsome, modern gentleman that appears when it’s showtime.

Fresh Tooltips

Precisely designed and coded Fresh Tooltips. Great for any kind of website, very practical. The top one is 100% transparent black, which looks very very cool.