This is a message.

Imitating browsers default tooltip

The first two images show the browser's default tooltip and the last two show the jQuery Tools tooltip. We are trying to mimic the standard browser behaviour.

 
standalone demo

So what is the point of all this? First of all we have a similar syntax for enabling both of the tooltips. Browsers without JavaScript enabled will always see the default tooltip. Secondly, the browser's tooltip is not always the best one. Here are the main benefits of the jQuery Tools tooltip which cannot be achieved with the browser's default tooltip:

  • Appearance and dimensions can be tweaked.
  • The tooltip can contain any HTML element.
  • You have full control over the positioning.
  • You can move the cursor on top of the tooltip so you can use links or forms inside of them.
  • You can control the delay in showing or hiding the tooltip before and after your mouse moves over the trigger element.
  • You can change the show/hide effect.
  • Everything is scriptable and you can even make your own tooltip plugins.

HTML/CSS coding

Our HTML structure is identical to the basic setup. Here we have a single tooltip element and this is how it has been styled: 

.tooltip {
    display:none;
    background-color:#ffa;
    border:1px solid #cc9;
    padding:3px;
    font-size:13px;
    -moz-box-shadow: 2px 2px 11px #666;
    -webkit-box-shadow: 2px 2px 11px #666;
}

CSS

Note: we are using a drop shadow for the latest browsers, i.e. the latest versions of Firefox, Safari, Konqueror and Chrome.

JavaScript coding

A single JavaScript call initializes the tooltip. The configuration options are commented: 

      $("img[title]:gt(1)").tooltip({
          // use div.tooltip as our tooltip
          tip: '.tooltip',
 
          // use the fade effect instead of the default
          effect: 'fade',
 
          // make fadeOutSpeed similar to the browser's default
          fadeOutSpeed: 100,
 
          // the time before the tooltip is shown
          predelay: 400,
 
          // tweak the position
          position: "bottom right",
          offset: [-50, -80]
      });

JavaScript

Enclosing your call inside $(document).ready executes the script right after the document is scriptable. Read more about that in the User's Manual.