Question

By default in all browsers, title attributes only show on mouse over. I want to show on keyboard focus also. I know this is not possible through only HTML and CSS.

JavaScript will be needed. so i use jquery in almost all projects. so i need a jquery solution to show title on onfocus.

<a title="this is title" href="#">Websites</a>

Later added:

After searching a lot on google i found a javascript solution

Now i just need a jquery version of this

see here : http://www.brothercake.com/scripts/tooltips/tooltips.html

Answer 1

JS code

$(function() {
        var xOffset = 10;
        var yOffset = 20;

        $("input").focus(function(e) {
            this.t = this.title;
            this.title = "";
            $("body").append("<span id='tooltip'>" + this.t + "</span>");
            $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
        });

        $("input").blur(function(e) {
            this.title = this.t;
            $("#tooltip").remove();

            $("#tooltip").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");   
        });   
    });

CSS

 #tooltip{
  position:absolute;
  border:1px solid #333;
  background:#f7f5d1;
  padding:2px 5px;
  color:#333;
  display:none;
  } 

the HTML element

 <input title="testing the focus tooltip" name="name" type="text"/>

Just for the fun of coding here the same but for A link element

$('a').click(function(e) {
    e.preventDefault();
  this.focus(function (e) {
      this.t = this.title;
      this.title = "";                    
    $("body").append("<span id='tooltip'>"+ this.t +"</span>");
    $("#tooltip")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px")
      .fadeIn("fast");    
    });
});

 <a title="fdsfsdfsd" href="javascript:;" >test a foucs</a>