如何在 angularjs 中悬停时在禁用按钮上添加弹出消息？答案

【问题标题】：How to add popup message on disabled button while hovering in angularjs?如何在 angularjs 中悬停时在禁用按钮上添加弹出消息？
【发布时间】：2018-12-07 09:53:57
【问题描述】：

我的表单中有一个提交按钮，如果表单有效，则启用该按钮，否则将处于禁用状态。我想在将鼠标悬停在禁用按钮未启用按钮上时添加弹出消息。如何在angularjs中动态添加？

【问题讨论】：

你需要像Bootstrap's Tooltip 这样的东西才能让它工作。然后根据表单的状态动态添加/删除属性。你也可以试试 BS 的 JS 功能

标签： angularjs

【解决方案1】：

Bootstrap 有一个不错的工具提示，如果您不喜欢它，请随意使用另一个，但在编写指令时它会有所不同。我更喜欢这样而不是编写自己的工具提示模块，因为这样你就有了一种经过测试且可靠的方式来在任何地方显示工具提示。

然后你会想把它包装成一个指令来在 AngularJS 中工作，比如：

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.hover(function(){
                // on mouseenter
                element.tooltip('show');
            }, function(){
                // on mouseleave
                element.tooltip('hide');
            });
        }
    };
});

现在您有了一个样式化的工具提示，并且在附加到任何元素时都应该可以工作。将其附加到所述按钮：

<button tooltip="myTooltip">I am a button</button>

注意：如果禁用会阻止它显示（未测试），那么只需将该按钮包装在 <span></span> 中并将工具提示绑定到该跨度，因为跨度未禁用。 p>

<span tooltip="myTooltip"><button>I am a button</button></span>

在任何情况下，无论是直接绑定到按钮还是围绕它，不要忘记在该视图的控制器中设置工具提示文本：

$scope.myTooltip = 'Tooltip text';

【讨论】：