在所有浏览器中,默认情况下,标题属性仅在鼠标悬停时显示.我也想展示键盘焦点.我知道仅通过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
最佳答案
JS代码
原文链接：https://www.f2er.com/css/530762.html$(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.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>
