CODEWITHSUNDEEP
jqueryangularjstooltipangular-ui-bootstrap
Loann Delgado
Loann Delgado

Reputation: 355

Overable popover with angularjs / bootstrap-ui

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.)

Upvotes: 1

Views: 413

Answers (1)

Scott
Scott

Reputation: 1690

So I just use

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

And the tooltip does not disappear until you mouse off the element that triggered it, which is slightly different then "the tooltip itself".

Upvotes: 0

Related Questions