angularjs 实现移入鼠标悬浮提示

最新推荐文章于 2023-10-20 11:41:23 发布

北方小伙_

最新推荐文章于 2023-10-20 11:41:23 发布

阅读量3.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Angularjs

本文链接：https://blog.youkuaiyun.com/weixin_39433171/article/details/89307064

Angularjs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在AngularJS中实现鼠标悬浮提示功能。通过定义提示div并结合ng-mouseover事件，实现在input框上鼠标悬停时显示跟随鼠标位置的提示效果。详细步骤包括设置提示样式、绑定方法和编写js函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步: 定义提示的div，在这里面自行改显示的样式

<div id="floatDiv" style="display: none; position: absolute; background-color: #7d8489; width: 150px;"></div>

第二步：在一个要使用此功能的input框里定义方法名、定义id值、并写出对应的js函数,如:ng-mouseover=“spSframe()”

 <input ht-input="item.PRO_NAME_" desc="项目名称" class="form-control" readonly="" id="input" ng-mouseover="spSframe()" type="text" ng-model="item.PRO_NAME_" permission="permission.fields.gc_repay_bill.PRO_NAME_" ht-validate="{&quot;required&quot;:false}"/>

js如下：

$scope.spSframe =function(){
    var inputId = ['input','input1','input2','input3','input4','input5'];//需要浮动显示内容的input id
            var floatDiv = document.getElementById('floatDiv');
            for(var k = 0; k < inputId.length; k++ ){
                var input = document.getElementById(inputId[k]);
                //显示浮动窗
                input.onmouseover = function (ev){ 
                    var windowEvent = window.event; //避免windowEvent丢失
                    setTimeout(function(){
                        floatDiv.innerText = ev.toElement.value || '(空)';
                        floatDiv.style.display = 'block';
                        var mousePosition = getMousePos(windowEvent); //获取鼠标位置
                        floatDiv.style.left = mousePosition.x + 'px';
                        floatDiv.style.top =  mousePosition.y + 'px';
                    },200);
                };
              //隐藏浮动窗
                input.onmouseout = function (ev) {   
                    floatDiv.style.display = 'none';
                };
               
            }
  };
   
  //获取鼠标相当于文档位置
    function getMousePos(event) {
       var e = event || window.event;
       var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
       var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
       var x = e.pageX || e.clientX + scrollX;
       var y = e.pageY || e.clientY + scrollY;
       //alert('x: ' + x + '\ny: ' + y);
       return { 'x': x, 'y': y };
    }

实现效果如下图，
在这里插入图片描述
是跟随鼠标位置进行显示，如有帮助赞一下呗或者评论一波呗，谢谢了老铁