Skip to main content

Converts title attributes into styled tooltips using CSS and jQuery.

- ) (incept: )

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.

A bare bones version

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

  1. Creates a list of all elements containing a title attribute.
  2. Adds a class to each element to apply position:relative and remove focus outline.
  3. Adds tabindex=0 to each element to allow keyboard focus.
  4. Builds the tooltip using span elements.
  5. Adds mouse and keyboard focus events.
  6. On first activation stores as part of the object:
    1. A copy of the title text.
    2. A copy of the content.
    3. A html build of the tooltip including original content.
  7. Empties original title attribute.
  8. Replaces original content with "built" content.
  9. Fades in tooltip using jQuery.
  10. On mouse-out (or keyboard blur) replaces "built" content with original content.

Socialise: