是否有任何Jquery或任何其他方法可以在给予焦点时显示元素的标题,就像悬停时显示的标题一样???
我找到了这个jquery,但它不起作用.....谁能帮忙请...提前致谢!!!!!!!!!
$(function () {
var xOffset = 20;
var yOffset = 30;
$('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");
});
});
EL:focus::after { content: attr(title); }
应该工作。看妈,没有JS!
你只需要定位伪 ::after 元素。
请注意,这仅在"伪父级"允许伪元素时才有效。
焦点事件没有 x 和 y 位置。您需要使用元素的偏移量
http://api.jquery.com/offset/
使用 JQuery UI 工具提示。默认情况下,它处理冒泡mouseover
、mouseleave
、focusin
、focusout
document
事件。您只需要防止鼠标事件传播。
$(document).tooltip();
// prevent mouse event, handle focus events only
$('input').on('mouseover mouseleave', function(e) { e.stopPropagation(); });
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css" rel="stylesheet"/>
<input title="tooltip" type="text" />