如何按焦点在 HTML 元素上显示标题

How to display title on HTML elements by focus

本文关键字：显示 标题 元素 HTML 何按 焦点      更新时间：2023-09-26

是否有任何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" />

相关文章：