An experiment that uses a custom HTML5 data attribute (data-tooltip) and ::before and ::after generated content to turn any element into a popup tooltip. No Javascript or extra markup necessary.
<span data-tooltip="I’m a tooltip">tooltip</span>Would result in the following tooltip.
A few different colour schemes are available, just add the attribute data-tooltip-theme to the element and give it one of the following values - blue, green, orange or red; for example:
<span data-tooltip-theme="blue" data-tooltip="I’m a blue tooltip">tooltip</span>Would result in the following tooltip.
If no theme is explicitly set, the tooltip falls back to the default dark theme. Hover over the examples below to see the themes in action:
data-tooltip-theme="blue"data-tooltip-theme="green"data-tooltip-theme="orange"data-tooltip-theme="red"If you want a group of tooltips to share the same theme there’s no need to add the data-tooltip-theme attribute to each element, just give a parent element (the <body> for example) the data-tooltip-theme attribute instead. For example, the following code:
<body data-tooltip-theme="blue">Will set the blue theme for all tooltips on the page.
If you wish to align the tooltip text either left or right then add lft or rht respectively to the value of the data-tooltip-theme attribute. If you wish to use a monospace font then add mono to the value of the data-tooltip-theme attribute.
Multiple values can be concatenated as is shown below:
<span data-tooltip-theme="orange mono lft" data-tooltip="An orange tooltip with left aligned text displayed in a monospace typeface">tooltip</span>Which would result in the following tooltip.
A right to left writing direction can be set by adding rtl to the value of the data-tooltip-theme attribute. An example is shown below:
RTL tooltip text
While I have just said “no extra markup necessary”, replaced elements (such as img, object, input and textarea) require that the data-tooltip attribute is set on a “slightly hacky” wrapper element as is shown below:
<span class="tooltip-wrapper" data-tooltip="A placeholder image generated by placehold.it"><img src="http://placehold.it/350x150" /></span>Which results in the following:
Form elements can also be given tooltips using the same method; for example:
Note: The wrapper element has to be set to display:line-block; for the tooltip to be correctly positioned at the top of the element.
There's not really much point in having one. You have to edit the CSS file anyway in order to set the font-family and font-size as these are inherited properties and therefore have to be explicitly set (you dont want the tooltip to inherit a monospace font when hovering over a <code> block for example).
Additionally, webkit has problems when setting the font-size using REM units. This leaves us either PX or EM. EM values are problematic as the tooltip inherits an uncertain font-size from the parent element. PX units appear to be therefore the only way in which to currently set a consistent cross browser font-size. You may wish to change the current value of 13px.
If you are not using the themes then it’s also a good idea to strip the associated CSS from the file to keep the size down and then minify what’s left to remove the comments.
title attribute and forego the tooltip completely if the text is important to context.data-tooltip attribute.::before and ::after pseudo elements.Inspired by Nicolas Gallagher’s article Multiple Backgrounds and Borders with CSS 2.1.