如何使用jquery在焦点上显示标题属性？
如何使用jquery在焦点上显示标题属性？
提问于 2010-03-21 19:20:13
默认情况下，在所有浏览器中，标题属性只显示在鼠标上方。我也想在键盘上显示焦点。我知道这是不可能的，仅通过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
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-03-21 19:48:08
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').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>Stack Overflow用户
发布于 2010-03-21 19:23:11
有许多像qTip这样的插件可以让你以跨浏览器的方式完成这个任务。我怀疑您是否能够可靠地触发本机工具提示。qTip代码非常简单：
$('ul:last li.active').qtip({
content: 'This is an active list element',
show: 'mouseover',
hide: 'mouseout'
})我不确定它是否支持多个显示事件(在您的例子中，鼠标切换和焦点)。
Stack Overflow用户
发布于 2010-03-21 19:50:21
请Onfocus工具提示的作者使用他们的代码。
jQuery不是必需的，因为代码启用了文档中所有元素的工具提示。如果您想要动态生成的工具提示元素，您可能需要自己修改脚本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2488380
复制相关文章
相似问题
腾讯云开发者
