angularjs 实现移入鼠标悬浮提示

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

北方小伙_

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

阅读量3.8k

点赞数 3

分类专栏： Angularjs

本文链接：https://blog.csdn.net/weixin_39433171/article/details/89307064

版权

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

摘要由CSDN通过智能技术生成

第一步: 定义提示的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