Question

有一种简单的方法可以让一个工具提示悬停，然后再点击一个工具提示吗？

悬停时：

<span data-toggle="popover" data-trigger="hover" data-content="Click to show details">{{ someData }}</span>

点击：

<span data-toggle="popover" title="More details" data-trigger="hover" data-html="true" data-content="{{ someDetailedData }}">{{ someData }}</span>

只需使用此指令包装boostrap popover：

(function() {
    "use strict";

    angular
        .module("app.utils")
        .directive("toggle", function() {
            return {
                restrict: "A",
                link: function(scope, element, attrs) {
                    if (attrs.toggle == "tooltip") {
                        $(element).tooltip();
                    }
                    if (attrs.toggle == "popover") {
                        $(element).popover();
                    }
                }
            };
        });
})();

Answer 1

您可以使用ng-mousedown="mouseov = false" and ng-mouseover="mouseov = true"属性在标题中你可以做类似的事情

<span>< data-toggle="popover" title="{{mouseov 
   ? 'title on mouseover true' 
   : 'title on mousedown leave'}}"
   data-trigger="hover" data-content="Click to show details">{{ someData }}
</span>

AngularJS - 在悬停和单击时使用不同工具提示的Bootstrap popover

1 个答案: