Browsers Default Tooltip

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.

CSS

.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;
}

Javascript

$("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]
    });

View Example