鼠标悬浮提示

最新推荐文章于 2024-06-19 09:42:28 发布

niubility锐

最新推荐文章于 2024-06-19 09:42:28 发布

阅读量3.2k

点赞数 2

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_28325291/article/details/86569370

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

鼠标悬浮提示

需求：添加一个帮助悬浮说明

css代码：

 .question {
            width: 20px;
            margin-left: 20px;
            padding-bottom: 4px;
        }

        .tip {
            width: 200px;
            border: 2px solid #ddd;
            padding: 8px;
            background: #f1f1f1;
            color: #666;
        }

        img {
            border: none;
        }

html代码：

<body>
    <!--这里我是用的icon问号图标，tips为要提示的内容-->
    <img id="tips" tips="我是提示！"
        class="question" src="/resource/images/question-circle.png">
</body>

js代码:

var tip = {
            $: function (ele) {
                if (typeof (ele) == "object")
                    return ele;
                else if (typeof (ele) == "string" || typeof (ele) == "number")
                    return document.getElementById(ele.toString());
                return null;
            },
            mousePos: function (e) {
                //获取提示展示的坐标
                var e = e || window.event;
                return {
                    x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
                    y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
                };
            },
            start: function (obj) {
                //动态添加一个div作为提示，可以定义id为tip-prompt的全局样式
                $('body').append('<div id="tip-prompt" class="tip" style="position:fixed;left:0;top:0;display: none"></div>');
                var self = this;
                var t = $("#tip-prompt");
                //鼠标移入事件
                obj.mouseenter(function () {
                    var mouse = self.mousePos();
                    t.css("left", mouse.x + 10 + 'px');
                    t.css("top", mouse.y + 10 + 'px');
                   //获取提示消息，这里为了支持格式，使用的html
                    t.html($(this).attr("tips"));
                    t.css("display", "block");
                    t.css("z-index", "99999");
                })
                //鼠标移除事件
                obj.mouseleave(function () {
                    t.css("display", "none");
                })
            }
        }
$(function(){
   //启用提示
    tip.start($(".question"))
})

备注:这里还有很多可能需要处理的细节，如宽高如果内容过多，或者目标元素在边角的处理。

代码参考别人博客DIV+js+css跟随鼠标的浮动提示框:

niubility锐

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
鼠标悬浮提示

鼠标悬浮提示需求：添加一个帮助悬浮说明css代码： .question { width: 20px; margin-left: 20px; padding-bottom: 4px; } .tip { width: 200px; border...
复制链接

扫一扫