Styled and accessible tooltips
Convert title attributes to single line styled tooltips [v0.4] using CSS and jQuery.
A furtherence to a piece found at Image-free CSS Tooltip Pointers - A Use for Polygonal CSS?.
Reworked to handle font-only scaling, keyboard only, CSS3 styles, no CSS support, and no JavaScript support.
Example
Experience in accessibility, optimisation, (X)HTML, CSS, JavaScript, Ajax and a little jQuery.
Honk, blarg, blarg, honk?
CSS
Mostly CSS2 & 3 used. Degrades respectfully though.
*[title] {
border-bottom:1px dotted #ccc;
cursor:help;
padding-bottom:1px
}
*[title]:hover,*[title]:focus {
background:#eef;
border-bottom:1px dotted blue
}
.tooltipparent {
outline:0 solid;
position:relative
}
.tooltip {
display:none;
left:12px;
position:absolute;
top:-3.65em;
z-index:100
}
.tooltip .ttbox {
-moz-border-radius:1em;
-webkit-border-radius:1em;
background:#786D8F;
border:0.2em solid orange;
border-radius:1em;
color:#fff;
display:block;
font-weight:700;
padding:10px 15px;
white-space:nowrap
}
.tooltip .ttarrow {
border-bottom:0;
border-left:0.5em solid transparent;
border-right:0.5em solid transparent;
border-top:1em solid orange;
bottom:-0.95em;
height:0;
left:1em;
overflow:hidden;
position:absolute;
width:0
}
IEv6 bless, doesn't understand transparent as a colour consequently set it to the content background colour:
<!--[if lte IE 7]>
<style type="text/css">
.tooltip .ttarrow {
border-left:0.5em solid #fff;
border-right:0.5em solid #fff
}
</style>
<![endif]-->
jQuery JavaScript
This resource uses the excellent jQuery library
function turnOn(o){
if (!o.t){
// store orginal contents as part of object
o.t=o.title;
o.c=o.innerHTML;
// store tooltip build as part of the object
o.h=o.c+'<span class="tooltip"><span class="ttbox"> '+o.title+'</span><span class="ttarrow"></span></span>';
}
if ($(o).css('position')=="relative"){
o.innerHTML=o.h;
o.title='';
}
$(o).find('span.tooltip').fadeIn('fast');
}
function turnOff(o){
$(o).find('span.tooltip').fadeOut('slow');
o.innerHTML=o.c;
o.title=o.t;
}
// loop through all objects with a title attribute
var titles=$('[title]');
// use an efficient for loop as there may be a lot to cycle through
for(var i=titles.length-1;i>-1;i--){
// titled object must be position:relative
$(titles[i]).addClass('tooltipParent');
// titled object must appear in the keyboard focus
$(titles[i]).attr('tabindex','0');
// mouse & keyboard functions
$(titles[i])
.hover(function(){turnOn(this);},function(){turnOff(this);})
.focus(function(){turnOn(this);})
.blur(function(){turnOff(this);});
}
How it works
- Creates a list of all elements containing a title attribute.
- Adds a class to each element to apply position:relative and remove focus outline.
- Adds tabindex=0 to each element to allow keyboard focus.
- Builds the tooltip using span elements.
- Adds mouse and keyboard focus events.
- On first activation stores as part of the object:
- A copy of the title text.
- A copy of the content.
- A html build of the tooltip including original content.
- Empties original title attribute.
- Replaces original content with "built" content.
- Fades in tooltip using jQuery.
- On mouse-out (or keyboard blur) replaces "built" content with original content.
Social links and email client: