Angular tooltip should stay open when hovered

Question

How can I achieve that a tooltip (angular/bootstrap UI) stays open when using "hover" as a trigger?

Using "mouseover" I get better behaviour (tooltip stays open until I reenter the element where tooltip had been assigned to).

EDIT: the same issue came up with JQUERY a while ago, please see here: Jquery tooltip that stays open on hover

That is exactly what I want to do with angular (as I cannot use JQuery).

Just for clarification, by tooltip you mean angular-ui/bootstrap tooltip? — maurycy, Feb 28 '14 at 10:34
this: http://stackoverflow.com/questions/16651227/enable-angular-ui-tooltip-on-custom-events may help you figure out the answer — Jake Johnson, Feb 28 '14 at 14:10
thank you, but that one I already read several times without getting a hint how this tooltipProvider works with those triggerMap to achieve what I want: triggering/showing with 'hover' and hiding with 'mouseleave' Within that example you stated there is a function which will be called - I do not know if I can avoid or need this function. I hope that the tooltip will remain open even if hovered — Pille, Feb 28 '14 at 14:15

score 0 · Answer 1 · answered Apr 04 '15 at 20:45

Note that you are using jQuery if you are using Angular, as jQuery is an AngularJS dependency. If you do not have the full version included in your source, Angular comes with jQuery Lite. Using jQuery would make it easier to clear the timeout of the tooltip. If you want a purely angular/css solution, see below.

The tooltip here should stay open for as long as the mouse is hovering over the element: http://plnkr.co/edit/jLThSTrLUapAG8OLW44m?p=preview

I answered a similar tooltip related question here - Angular UI Tooltip overflowing screen - and here, regarding making the tooltip dynamic - Angular + Bootstrap 2.3 - Dynamic tooltip.

The angular directive keeps the tooltip open until we move out of scope, that is until we move the mouse away.

.directive('tooltip', function () {
           return {
              restrict: 'A',
              link: function (scope, element, attrs) {
                 $(element)
                         .attr('title', attrs.tooltip)
                         .tooltip({placement: attrs.placement});
                 scope.$on('$destroy', function() {
                    element.tooltip('destroy');
                 });
              }
           }
        })

score 0 · Answer 2 · answered Sep 22 '22 at 14:48

If anyone is still looking for the answer to this, here is a way that worked for me: Disable autoClose and set the triggers to manual. Then add a mouseenter event to the element on which the tooltip should be shown and add a mouseleave event to the parent. These events will open/close the tooltip. Because the tooltip is child of the parent, when hovering, the mouseleave-event will not be triggered.

Here is an example:

<div (mouseleave)="t.close()">
  <div
    ngbTooltip="My tooltip"
    #t="ngbTooltip"
    (mouseenter)="t.open()" 
    [autoClose]="false" 
    triggers="manual" 
  >Some content</div>
</div>

Angular tooltip should stay open when hovered

2 Answers2