Hint.css – Data Attributes, CSS3 Transitions, Pseudo Elements and the Content Property
Hint.css allows for relatively simple, yet stylish tooltips on any element you might find appropriate. Foremost we will be speaking about text, links and images. To have the tooltip shown, you will need to add at least two consecutive classes to the element chosen. The first class will always be called
hint, triggering the stylesheet initially, while the second defines the position or the visual appearance of the tooltip. You can add as many classes as you like to achieve as many combinations as possibly thinkable. If you would want to define the position as well as the color of the tip, you would simply add three classes, like so:
<span class="hint hint--top hint--error" data-hint="This is an error tooltip">Oh man! You are gonna self-destruct in 5 sec.</span>
Would turn out looking like this:
hint we stick Hint.css to the element. The class
hint--top positions the tooltip above the
hint--error defines the red visuals. The following data attribute
data-hint carries the text to be shown (usually) on hover.
HTML5 data attributes are a possibility, to inject random data into a valid source code. Data inside of data attributes will not be shown to the visitor and don’t influence the design. Nevertheless, they are included in the page and can simply be read and processed by specialized scripts and methods, by Hint.css in our case.
In its recent form, Hint.css has definitions for
hint--right, used for the positioning of the tooltips. Moreover there are color definitions for common status messages such as
hint--success. If you want your tooltips to always stay visible, thus not needing to be triggered on mouse hover, you will need to add the class
As Hint.css represents pure CSS, the feature set can easily be extended by skilled developers. This applies to colors and other visual aspects in the first place. Skilled enough and stuffed with a little fantasy, you could push the limits even further. This is fostered by the fact, that Hint.css is developed in Sass, with the Sass sources also available. Hint.css can be downloaded from Github under the liberal MIT license, which allows for the usage in private as well as commercial projects.
If you are not into tooltipping at all, the stylesheet definitely is for you anyhow. Reduce it to the educational aspects. You will learn a lot from fumbling around the stylesheet. Hint.css is a 100% recommendation. What you might want to know, before I leave you to your own devices, is, that CSS transitions on pseudo elements only work in Firefox. Other browsers simply don’t show transitions which I would not have noticed, had I not tried in Firefox after I knew.
- HINT.css – A tooltip library in CSS | kushagragour.in/lab/hint
- HINT-Github-Repository | chinchang / hint.css
- Link-Titles | W3C
About the Author
Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?