鼠标悬浮提示

短命女 2022-03-25 13:10 289阅读 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>
        
        <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跟随鼠标的浮动提示框:][DIV_js_css]

[DIV_js_css]: https://blog.csdn.net/qm2010429/article/details/32318527

发表评论取消回复

表情：

评论列表（有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读

相关 idea打开鼠标悬浮提示

> 欢迎关注微信公众号：程序员小圈圈 > 原文首发于： [www.zhangruibin.com][] > 本文出自于： [RebornChang的博客][www.z

墨蓝/ 2023年06月04日 13:54/ 0 赞/ 11 阅读

相关 vue鼠标悬停出现悬浮框

之前遇到一个需求，电商主页中鼠标悬停到某个a标签上面，下面就会出现一个div框，里面有各种选项。这里的主要问题是，如何做到鼠标悬停出现下拉框，并且鼠标移走下拉框和标签后下拉框消

╰半夏微凉°/ 2022年12月18日 00:48/ 0 赞/ 486 阅读

相关 jquery实现鼠标悬浮显示图片

实现鼠标悬浮显示图片图片跟随鼠标 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

桃扇骨/ 2022年06月04日 05:50/ 0 赞/ 336 阅读

相关 Eclipse 悬浮提示功能

使用悬浮提示 java 编辑器中包含了不同类型的悬浮提示，悬浮提示提供了鼠标指针指向元素的额外信息。所有java编辑器中相关的悬浮提示可以通过 preference(首选

妖狐艹你老母/ 2022年03月29日 14:15/ 0 赞/ 177 阅读

相关鼠标悬浮提示

鼠标悬浮提示需求：添加一个帮助悬浮说明 css代码： .question { width: 20px;

短命女/ 2022年03月25日 13:10/ 0 赞/ 290 阅读

相关 bootStrap Table 鼠标悬浮显示详细信息

bootStrap Table 鼠标悬浮显示详细信息 bootStrap Table 单元格内容较多时，显示会不完整如下图： ![在这里插入图片描述]

古城微笑少年丶/ 2022年03月20日 07:18/ 0 赞/ 1569 阅读

相关 ubuntu鼠标悬浮设置

Simulate clicking by hovering You can click or drag simply by hovering your mouse poi

叁歲伎倆/ 2022年02月25日 00:14/ 0 赞/ 431 阅读

相关 li鼠标悬浮手势样式

一、问题描述写了一个ul li无序列表，想实现如下效果：点击某一个li进行页面跳转鼠标悬浮到li上，默认是箭头，想改成手势二、处理方式 <

墨蓝/ 2021年09月25日 11:36/ 0 赞/ 471 阅读

相关鼠标悬浮菜单栏动画（vue版）

![在这里插入图片描述][20200506182037239.gif] 数据动态 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGV

我会带着你远行/ 2021年07月24日 20:18/ 0 赞/ 483 阅读

相关 span标签鼠标悬浮出现手图标

style='cursor:pointer;' 比如 > `<span style='cursor:pointer;'></span>` 效果图 ![在这里插

太过爱你忘了你带给我的痛/ 2021年05月22日 20:36/ 0 赞/ 602 阅读