JS实现TITLE悬停长久显示效果完整示例

下面给出JS实现TITLE悬停长久显示效果的完整攻略。

什么是TITLE悬停长久显示效果

当鼠标悬停在一个链接或者图片上时，浏览器会默认显示一个标题属性 TITLE，该属性通常只会在鼠标指针悬停在元素上时短暂地出现，鼠标指针移开后就会消失。但是，在一些情况下，我们希望该TITLE信息可以长久地显示在页面上，比如提示用户更多信息时常用。那么，下面就来介绍如何通过JS实现该效果。

实现方法

方法一：使用title属性和mouseover事件

我们可以通过JS监听鼠标悬停事件，当鼠标悬停在元素上时，将TITLE属性的值读取出来，并通过JS创建一个DIV元素，在该元素中显示TITLE信息，同时利用内部的定时器让该DIV元素在指定的时间后自动隐藏。

下面是示例代码：

<a href="#" title="我是title悬停信息" onmouseover="showTitle(this)">鼠标悬停显示title长久信息</a>
<div id="titleTip" style="display:none;position:absolute;border:1px solid #ccc;background-color:#fff;padding:5px;"></div>
<script>
    var timer = null;
    function showTitle(obj) {
        // 读取title信息
        let title = obj.title;
        // 在DIV元素中显示TITLE信息
        let titleTip = document.getElementById("titleTip");
        titleTip.innerHTML = title;
        // 让DIV元素显示
        titleTip.style.display = "block";
        // 定时器控制DIV元素的展示时间
        timer = setTimeout(function() {
            titleTip.style.display = "none";
        }, 2000);  // 该元素在2秒后自动隐藏
    }
</script>

上面代码中，我们在<a>标签上加上onmouseover事件，当鼠标悬停时便会触发JS函数showTitle()。在该函数中，我们使用document.getElementById()方法获取到一个DIV元素（其ID为"titleTip"），通过该DIV元素来展示TITLE信息，同时使用定时器，在2秒钟后自动隐藏该DIV元素。

方法二：使用插件

如果你不想手写JS实现title悬停长久显示效果，那么这时你就可以使用一些开源的JS插件，来轻松实现该效果。

这里，我给大家介绍一个实现该效果的开源JS插件 - jQuery Tooltipster。该插件不仅支持title悬停长久显示效果，还支持自定义的提示信息、动画效果等。

下面是示例代码：

<!-- 引入jquery和Tooltipster插件 -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/tooltipster.bundle.min.js"></script>

<!-- 定义一个鼠标悬停元素 -->
<a href="#" title="我是title悬停信息">鼠标悬停显示title长久信息</a>

<!-- 初始化Tooltipster插件，实现长久显示效果 -->
<script>
    $(document).ready(function() {
        $('a[title]').tooltipster({
            theme: 'tooltipster-punk',
            arrow: false,
            delay: 100,
            functionPosition: function(instance, helper, position) {
                position.coord.left += 10;
                position.coord.top -= 20;
                return position;
            }
        });
    });
</script>

上面代码中，我们在<head>标签内引入了jQuery库和jQuery Tooltipster插件，然后在一个<a>标签上，加上title属性，以及jQuery选择器$('a[title]')，将该元素设置为tooltipster。

在tooltipster的初始化选项中，我们自定义了一个主题，以及鼠标指向元素多少毫秒后出现提示框，以及如何调整提示框的位置。

最后，当页面加载完成时，我们使用$(document).ready()监听页面加载完成事件，并执行tooltipster()方法，来初始化该元素的tooltipster提示框。

总结

通过上面的两个示例，我们可以看到，实现title悬停长久显示效果的过程较为简单，主要通过监听鼠标悬停事件，并控制展示时间来实现。如果你还对该效果的实现有其它疑问，欢迎提出，我们一起探讨。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现TITLE悬停长久显示效果完整示例 - Python技术站

JS实现TITLE悬停长久显示效果完整示例

什么是TITLE悬停长久显示效果

实现方法

方法一：使用title属性和mouseover事件

方法二：使用插件

总结

相关文章