How to show title attributes onfocus using jquery?

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>

La开发者_高级运维ter 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

---

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>

---

There is a number of plugins like qTip that will let you do this in a cross-browser fashion. I doubt that you can trigger the native tooltip reliably. qTip code is quite straightforward:

$('ul:last li.active').qtip({
   content: 'This is an active list element',
   show: 'mouseover',
   hide: 'mouseout'
})

I'm not sure if it supports multiple show events (in your case, mouseover and focus).

---

Ask the author of Onfocus tooltips to use their code.

jQuery is not necessary because the code enables the tooltipping for all elements in the document. You may need to modify the script yourself if you want to tooltip elements which are dynamically generated.