Question

我正在尝试创建一个未关闭的工具提示，只要鼠标不离开它。

我尝试使用bootstrap-ui工具提示来做到这一点但是我想创建一个set-trigger来执行类似这样的操作：“mouseenter：.popover（）。mouseleave” 但我尝试的东西不起作用。

我也试过应用这个方法：Create Hoverable popover using angular-ui-bootstrap（第一个答案）但我收到一个错误：“undefined不是函数”。

我的bootstrap-ui工具提示：

<a href="#/place/{{place.id}}" data-ng-repeat="place in event.places" data-tooltip-placement="bottom" data-tooltip-html-unsafe="<h3>{{place.name}}</h3>" data-tooltip-append-to-body="true" data-tooltip-trigger="mouseenter">{{ place.name }},</a>

目前，我创建了下面的JQuery popover但是，通过这种方式，我的ng-repeat（来自angularjs）指令在popover中不起作用。而且，我认为这不是最好的方法，我更愿意在没有jquery的情况下这样做。

html：

<div class="pop" >
 <i class="icon-map-marker"></i>
 <a class="triggers" href="#/place/{{place.id}}" data-ng-repeat="place in event.places">{{place.name}} // {{place.city}}</a>
</div>

JS：

app.directive('pop', function(){
    return {
        restrict: 'C',
        link: function(scope, element, attrs){
            $(element).mouseenter(function(){
            $(element).find('.triggers').mouseover(function(){
                $(element).find('.popInner').remove();
                $(element).append('<div class="popInner"><h3 data-ng-repeat="place in event.places">{{place.name}}</h3></div>').find('.popInner').mouseout(function() {
                    $('.popInner').remove()
                });
            });
            });
        }
    };
});

所以这就是问题：只要鼠标停留在工具提示内容上，制作工具提示的最佳方法是什么？（如果只能使用angularjs和bootstrap-UI。）

Answer 1

所以我只使用

<a href="blah" tooltip="This will stay in place">

工具提示不会消失，直到您将触发它的元素鼠标移开，这与“工具提示本身＆＃34;”之后略有不同。

带有angularjs / bootstrap-ui的可维护的popover

1 个答案: