利用 jQuery 制作超链接提示功能, 增加用户体验.

我们知道 a 链接默认自带 tooltip 提示功能, 但是当鼠标放在超链接上时, 并不是立刻显示出来的, 而且默认的提示样式不能更改, 也许和你网站的样式格格不入.

为了增加用户体验, 我们尝试制作这个 "超链接提示功能" 增加用户体验. 当然需要使用js来完成.

思路分析:

1. 鼠标移入超链接

①创建一个div元素, 其内容为该超链接的title属性值

②将创建的元素追加到文档中

③为它设置x坐标和y坐标, 使它显示在鼠标位置的旁边.

2. 鼠标移出超链接, 移出div元素

3. 确保在移动的过程中, div元素坐标跟随鼠标移动.

 

示例:

超链接: 

<a href="#" class="tooltip" title="这是我的超链接提示文字">提示</a>

需要适当的给一些样式: 请根据实际需要修改即可, 这里就是设置的是tooltip的样式, 下面只是一个例子!例子!例子!

<style>
#tooltip {
    position: absolute;
    background: maroon;
    padding:5px 15px;
    color:#fff;
    text-align: left;
    border-radius: 6px;
}
</style>

给有提示的超链接设置一个类, 该类控制, 提示文字的出现. 这里设置的是 class="tooltip";

 

下面就是根据思路码的jQuery代码了, 一起来看看吧!

<script src="http://cdn.staticfile.org/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>')</script>
<script type="text/javascript">
$(function () {
    var $tooltip = $("<div id='tooltip'></div>"); // 设置#tooltip的jQuery对象
    $('.tooltip').mouseover(function (e) {
        var _ = $(this);
        this.tooltipText = this.title; // 获取超链接title值
        this.m = 25;// 设置一个数字, 用来控制tooltip的y轴坐标
        this.n = 7;// 设置一个数字, 用来控制tooltip的x轴坐标
        this.title = ""; // 设置超链接title值为空, 避免重复出现 tooltip (浏览器默认的样式和自己设置的tooltip样式)
        $("body").append($tooltip); // 追加tooltip到body中
        $tooltip.css({
            "position":"absolute",
            "top":(e.pageY-this.m)+"px", //使tooltip 在鼠标手型向上, 向下使用 e.pageY+this.m;
            "left":(e.pageX+this.n)+"px" //使tooltip 在鼠标手型向右, 向左 请改"left" 为 "right";
        }).show('fast')
　　　　　.html(this.tooltipText);//tooltip内容为超链接title值.
    }).mouseout(function () {
        this.title = this.tooltipText; // 设置超链接title值为原来的title值
        $tooltip.remove(); // 删除tooltip元素
    }).mousemove(function (e) {// 移动时, 使 tooltip 跟随鼠标位置移动, 使用 mousemove 事件
        $tooltip.css({
            "position":"absolute",
            "top":(e.pageY-this.m)+"px",
            "left":(e.pageX+this.n)+"px"
        }).show('fast').html(this.tooltipText);
    })
})
</script>

好了, 你可以应用到自己的项目中去, 并且做一些细微的调整就行. :)