How to pop up a hint diglog when focusing on an input like the following page with jQuery?

Question

http://www.resumebucket.com/signup

Is there a ready plugin to implement this?

Should not be big in size.

Answer 1

use jQuery plugin Tooltip:

http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Answer 2

http://nicolae.namolovan.googlepages.com/jquery.inputHintBox.html ?

Answer 3

A plugin should be a last resort in this instance. If you think about what you're trying to do and write the jQuery code it's really not that difficult. Maybe 10 - 20 lines of code.

Answer 4

In normal javascript you can do the following in your jquery .ready function:

(see This link to http://www.askthecssguy.com/2007/03/form%5Ffield%5Fhints%5Fwith%5Fcss%5Fand.html)

$(document).ready(function()
{
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++){
     // test to see if the hint span exists first
     if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
      // the span exists!  on focus, show the hint
      inputs[i].onfocus = function () {
       this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
      }
      // when the cursor moves away from the field, hide the hint
      inputs[i].onblur = function () {
       this.parentNode.getElementsByTagName("span")[0].style.display = "none";
      }
     }
    }
    // repeat the same tests as above for selects
    var selects = document.getElementsByTagName("select");
    for (var k=0; k<selects.length; k++){
     if (selects[k].parentNode.getElementsByTagName("span")[0]) {
      selects[k].onfocus = function () {
       this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
      }
      selects[k].onblur = function () {
       this.parentNode.getElementsByTagName("span")[0].style.display = "none";
      }
     }
    }
});

Then put your hints in a <span class="hint"> tag and add the following to your css file:

.hint {
display: none;
position: absolute;
width: 200px;
margin-top: -4px;
margin-left: 30px;
border: 1px solid #c93;
padding: 10px 12px;
}