I'm trying to create a tooltip that is not closed as long as the mouse doesn't leave it.
I tried to do that with the bootstrap-ui tooltip but I want to create a set-trigger in order to do something like this : "mouseenter : .popover().mouseleave" But what I tried didn't work.
I also tried to apply this method : Create Hoverable popover using angular-ui-bootstrap (1st answer) but I get an error : "undefined is not a function".
My bootstrap-ui tooltip :
<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>
For the moment, I created the folowing JQuery popover but, by this way, my ng-repeat (from angularjs) directive doesn't work inside the popover. Moreover, I don't think it's the best way to do that, and I would prefer to do that without 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()
});
});
});
}
};
});
So here is the question : what's the best way to make a tooltip that is not closed as long as the mouse stay on the tooltip content? (And if it's possible only using angularjs and bootstrap-UI.)
