AngularJS - 悬停时带有不同工具提示的 Bootstrap 弹出窗口并单击

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 弹出框:

(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>