A simple css only tooltip using a data-attribute

There are many ways to create tooltips, and in the past I've created and used a relatively complex ECMAScript framework for it. But with css3, at least for simple and small tooltips, this framework becomes obsolete.

Here's a cookbook for creating a simple tooltip. I'll be using a data attribute for the element, and use css to format it.

First, let's create an element containing the data-tooltip attribute. To be able to use a transition effect for the tooltip, the trick is to hide the element using opacity, a negative z-index and an absolute position

<div data-tooltip="This is the tooltip text, to be shown on hover">Lorem ipsum etc.</div>

Next step: create css for the :before pseudo class. Note: you could also use the :after pseudo class, but that has consequences for positioning the tooltip. Just fiddle around with the css presented here.

[data-tooltip]:before {
    /* use the attribute value for the content */
    content: attr(data-tooltip);
    /* hide the pseudo element, next three lines are mandatory */
    opacity: 0;
    /* get it out of the way if not hovered */
    top: -1000em;
    position: absolute;
    /* format the pseudo-element, this is examplary */
    font-size: 0.8em;
    padding: 0.1em 0.3em;
    max-width: 400px;
    border: 1px solid #888;
    background: white;
    margin-top: 1.5em;
    white-space: pre;
    text-align: left;
    border-radius: 5px;
    box-shadow: 1px 1px 4px #888;
}

And the last step: create css for the :hover pseudo class

[data-tooltip]:hover:before {
    /* show the pseudo element, following two lines are mandatory */
    top: auto;
    z-index: 2;
    /* a 'fade in' effect, the element fades in after a delay of 0.3 seconds */
    transition: opacity 0.4s 0.3s ease-in;
}

That's all. It should look like this.

The technique is used here (hover the numbers).

Simplicity please

Sometimes programmers choose programmer solutions, which really can be too complex.

So I think this ...

function stringRepeat(str, num) {
    num = Number(num);
    var result = '';
    while (true) {
        if (num & 1) { // (1)
            result += str;
        }
        num >>>= 1; // (2)
        if (num <= 0) break;
        str += str;
    }
    return result;
}

[Found @ ②ality – JavaScript and more]

... (though nifty and nice code) can be replaced by:

function stringRepeat(str, num) {
    return Array( (num || 1) + 1 ).join(str);
}

Where num || 1 ensures that the initial string is always returned, even if num is not passed in the method call.

Replace all diacritics in strings using a Regular Expression

To replace all diacritics (aka 'extended characters') by their HtmlEncoded counterpart in strings use:

[SomeString]
  .replace(
           /[\u0080-\u024F]/g,
           function(a) {return '&#'+a.charCodeAt(0)+';';}
  );

For example:

"Diëlectrische Coëfficiënten".replace(/[\u0080-\u024F]/g, function(a) {return '&#'+a.charCodeAt(0)+';';});
//    returns
//=> "Diëlectrische Coëfficiënten"