jquery - 如何使用 jquery 显示标题属性 onfocus？

Question

默认情况下，在所有浏览器中，标题属性仅在鼠标悬停时显示。我也想在键盘焦点上显示。我知道仅通过 HTML 和 CSS 是不可能的。

将需要 JavaScript。所以我几乎在所有元素中都使用 jquery。所以我需要一个 jquery 解决方案来在 onfocus 上显示标题。

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

后来补充:

在谷歌上搜索了很多之后，我找到了一个 javascript 解决方案

现在我只需要这个的 jquery 版本

请看这里:http://www.brothercake.com/scripts/tooltips/tooltips.html

Answer 1

JS代码

$(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 元素

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

只是为了有趣的代码在这里相同但对于 A 链接 元素

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