How to show title attributes onfocus using jquery?

Question

By default in all browser title attributes only shows 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 need. so i jquery in almost all projects. so i need a jquery solution to show title on onfocus.

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

Lated added:

After searching a lot on google i found a javascript solution

Now i just need jquery version of this

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

Answer 1

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).

Answer 2

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>

Answer 3

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.