hint.css is a nice library in pure for forgetting the oldie-yellowish-boring tooltip, written in Sass. I now use it in New Year’s Resolution Generator, which was born a month ago and I had been making it look prettier every now and then whenever I had time.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHVY4KRg3q052Clxn8slkc0Mktf5SaPpHZC3iAj5vuWOy-AYwGCxC501MfPzENczEmiyjF4hmlf5fQYK6QldLorlvo10srW6HYxYTUNBMMyeQ_RGw3S-SS25Sx9gBZuTdCtYOViWczHJU/s800/hint.css.png

Screenshot of current New Year’s Resolution Generator with hint.css’ tooltip

Note

The content on this page requires JavaScript and the embedded style within the post; if you are reading from feed reader, they may be stripped.

1   Four ways

hint.css can show hint text on one of four sides of the text. Hover on the text below, the tooltip will show. The content in the hint text is the used CSS classes.

⇧, ⇧, ⇩, ⇩, ⇦, ⇨, ⇦, ⇨, Ⓑ, Ⓐ, ★

The syntax is fairly simple, just assign the hint.css’ class and the hint text in data-hint attribute.


<span class='hint hint--top'
  data-hint='the hint text'>normal text</span>

2   Four + 2 types

2.1   Four predefined admonitions

It also supports four different predefined admonitions, they are basically styled with common colors for those types of messages.

ERROR, INFO, WARNING, SUCCESS

2.2   “Always” “Rounded”

If you look closer at the screenshot at beginning of this post, you would notice the tooltip has rounded corners, but the live examples above do not. Since version 1.1.0, a new hint--rounded class is supported for rounded corners:

ROUNDED INFO

If, for some reason, you need to tooltip to show permanently, you can use hint--always class:

ALWAYS, ALWAYS INFO, ALWAYS ROUNDED SUCCESS

3   Extending

3.1   Custom color/style

This part needs little more work if you indeed need some special color or even little dynamic colors and/or styles. You can always add your CSS rule to override with specific ID/class. For example,


.hint--red:after {
  background: #f00;
}

You add the custom class to the text, then you shall have a hintext with red background. Here is a little complicated example, with poetic feeling in the air:

Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.

The background and other stuff are removed, the tooltip’s triangle’s color is changed to white, so is the text color to match the poem:


.hint--bare.hint--left:before {
  border-left-color: #fff;
}
[...]
.hint--bare:after {
  padding: 0.5em;
  border: none;
  background: none;
  font-size: 2em;

  box-shadow: none;
}
.hint--rose:after {
  color: #ff007f;
}
[...]

4   Fun: Merry-go-round

Just keeping switching the class to have tooltip traveled from one side to next side. It’s not smooth as you would like in browser supporting CSS Transitions on pseudo elements, it should be fixable, however, that wouldn’t be really useful anyway.

Merry-go-round

5   Final thoughts

I like this tooltip library, it’s in pure CSS. If CSS expression attr() can fully support more than just content property, then it could be more powerful. For example, you may be assigning the different color to each text’s hints:


<span class='hint hint--top' data-hint-background='#f00' data-hint='hint'>text</span>
<span class='hint hint--top' data-hint-background='#0f0' data-hint='hint'>text</span>
<style>
.hint:after {
  background: attr(data-hint-background color);
}
</style>

Unfortunately, it isn’t working in Firefox 17 and Google Chrome 24. Firefox stripped the style and Chrome told me that property value is invalid. If neither of them support that, then I doubt other browsers would support.

I hope I can use it for New Year’s Resolution Generator, which stores the colors in JavaScript code and the elements are created on page load. If current browser supported attr() on other CSS properties, then it would be perfect. The color doesn’t have to be fixed in stylesheet. Currently, the generator writes CSS styles for each element’s hint text.

The library should work well for most of cases, just include the stylesheet, and it’s good to go. The minified version is about 4K, gzip’d about 1K, small cost to pay if you would use it throughout the entire website.

By the way, I notice one thing quite interesting is the note of hint.css:

CSS3 Transitions on pseudo elements is currently available on Firefox only. On rest of the browsers it degrades gracefully without any transition. Though the good news is that it will be coming soon on Webkit also.

I always thought Webkit is bolder on experimental stuff than Firefox, -webkit was always something before anything (Got it?). Well, not this time.

6   Changes

  • 2013-02-22T09:42:17Z: update for version 1.1.0 and the new hint--rounded class.