Question

默认情况下，在所有浏览器中，标题属性仅在鼠标悬停时显示。我也希望在键盘焦点上显示。我知道只有HTML和CSS才能实现这一点。

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

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

后来添加：

在google上搜索了很多我找到了一个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 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这样的插件可以让您以跨浏览器的方式执行此操作。我怀疑你是否可以可靠地触发原生工具提示。 qTip代码非常简单：

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

我不确定它是否支持多个节目事件（在您的情况下，鼠标悬停和焦点）。

Answer 3

要求Onfocus tooltips的作者使用他们的代码。

jQuery不是必需的，因为代码为文档中的所有元素启用了工具提示。如果要使用动态生成的工具提示元素，可能需要自己修改脚本。

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

3 个答案: