Micro design elements; minimum browsers support: IE8 (with tabindex feature) 🐞

Link link link link link Link link link link link Link link link link link Link link link link link


<a href="#nogo" data-tooltip="My Tooltip" class="tooltip-bottom auto-tooltip">Link</a>

Note: with or without the class "auto-tooltip" (for constrained widths) depending of your needs.

Link link link link link link link


<a href="#nogo" aria-describedby="tip1" tabindex="0" aria-controls="tip1" aria-haspopup="true" aria-expanded="false" class="tooltip tooltip-top">Link<span role="tooltip" aria-hidden="true" id="tip1">My Tooltip</span></a>

Note: IE7 capable! For "span" cases, a "tooltip" class is required.
	Same as above, "auto-tooltip" class available for your needs (without it the tooltip's width inherites its parent).

With a footnote ^{1Textpattern CMS. The small content management system that can handle big ideas. Textpattern is free and Open Source, too: textpattern.com/}.

Other Footnote test^1footnote

Here is a fully clickable shape:


<button data-tooltip="My Tooltip comes here..." tabindex="0" class="tooltip-bottom"><b>Link</b></button>

Note: same as above, "auto-tooltip" class available for your needs (color contrast ratio: 8.56:1 "AAA" score).

The ripple effect can be included as this:

<button data-tooltip="My Tooltip comes here..." tabindex="0" class="tooltip-bottom auto-tooltip">
		<b class="ripple">Link</b>
</button>

A tiny link sample with multiple lines in its tooltip but no page overflow on right edge: Link.

¹ Footnote here.

Patrick LEFEVRE

Search Box in pure CSS

Languages Switcher for TXP (accessible)

Tooltips (with 3 options)

Dual Screen Web Page Study

Text-Shadow