Using Tooltips in Form Fields

Here you can see a tooltip when you put your focus on any of the following form fields. You can move between fields with your keyboard (using the TAB key) or with your mouse.

HTML

    <form id="myform" action="#">

     <h3>Registration Form</h3>

     <div id="inputs">

     <!-- username -->

  <label for="username">Username</label>

  <input id="username" title="Must be at least 8 characters."/><br />

     <!-- password -->

  <label for="password">Password</label>

  <input id="password" type="password" title="Try to make it hard to guess." /><br />

     <!-- email -->

  <label for="email">Email</label>

  <input id="email" title="We won't send you any marketing material." /><br />

     <!-- message -->

  <label for="body">Message</label>

  <textarea id="body" title="What's on your mind?"></textarea><br />

     <!-- message -->

  <label for="where">Select one</label>

  <select id="where" title="Select one of these options">

  <option>-- first option --</option>

  <option>-- second option --</option>

  <option>-- third option --</option>

  </select>

  <br />

  </div>

     <!-- email -->

  <label>

      I accept the terms and conditions

  <input type="checkbox" id="check" title="Required to proceed" />

  </label>

     <p>

  <button type="button" title="This button won't do anything">Proceed</button>

  </p>

    </form>

CSS

.tooltip {
 background-color:#000;
 border:1px solid #fff;
 padding:10px 15px;
 width:200px;   
 display:none;
 color:#fff;
 text-align:left;
 font-size:12px;

/* outline radius for mozilla/firefox only */
  -moz-box-shadow:0 0 10px #000;
 -webkit-box-shadow:0 0 10px #000;
}

Javascript

// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({

 // place tooltip on the right edge
 position: "center right",

 // a little tweaking of the position
 offset: [-2, 10],

 // use the built-in fadeIn/fadeOut effect
 effect: "fade",

 // custom opacity setting
 opacity: 0.7

});

View Example

Dynamic Positioning of the Tooltip

HTML

<img src ="image1.jpg" title ="The tooltip text #1"/>
<img src ="image2.jpg" title ="The tooltip text #2"/>
<img src ="image3.jpg" title ="The tooltip text #3"/>
<img src ="image4.jpg" title ="The tooltip text #4"/>

CSS

.tooltip.bottom {
 background:url(lack_arrow_bottom.png);
 padding-top:40px;
 height:55px;
}

.tooltip.bottom {
  background:url(black_arrow_bottom.png);
}

Javascript

// initialize tooltip  
$("#dyna img[title]").tooltip({       

// tweak the position 
offset: [10, 2],       

// use the "slide" effect     
effect: 'slide' 

// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } 
});

View Example

Custom Tooltip Effect

Here you can see a customized "bouncy" tooltip effect.

HTML

<img src ="image1.jpg" title ="The tooltip text #1"/>
<img src ="image2.jpg" title ="The tooltip text #2"/>
<img src ="image3.jpg" title ="The tooltip text #3"/>
<img src ="image4.jpg" title ="The tooltip text #4"/>

Javascript

// create custom animation algorithm for jQuery called "bouncy"
$.easing.bouncy = function (x, t, b, c, d) {
    var s = 1.70158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

// create custom tooltip effect for jQuery Tooltip
$.tools.tooltip.addEffect("bouncy",

 // opening animation
 function(done) {
  this.getTip().animate({top: '+=15'}, 500, 'bouncy', done).show();
 },

 // closing animation
 function(done) {
  this.getTip().animate({top: '-=15'}, 500, 'bouncy', function()  {
   $(this).hide();
   done.call();
  });
 }
);

View Example

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