Question

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

Answer 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>中，然后将工具提示绑定到该范围即可，因为未禁用范围。

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

在任何情况下，您都可以直接绑定到按钮或在按钮上跨度，不要忘记在该视图的控制器中设置工具提示文本：

$scope.myTooltip = 'Tooltip text';

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

1 个答案: