How to show onfocus header attributes using jquery?

Question

By default, in all browsers, the title attributes are displayed only on hover. I also want to show on the keyboard. I know that this is not possible only through HTML and CSS.

You will need JavaScript. therefore I use jquery in almost all projects. so i need a jquery solution to show the name on on focus.

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

Added later:

After many google searches, I found a solution for javascript

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;
  } 

HTML element

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

, A link

$('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 2

, qTip, -. , . qType :

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

, show ( , ).

Answer 3

Onfocus .

jQuery , . , script , , .