0

How can I disable all other tooltips except the one on which my mouse is over?

What I am trying to acchieve is excluding tooltips from showing up except the one which has showed up as the last one. Sometimes too much toolips show up making it impossible to read the needed (= last) one.

I am new to things like $watch and $observe, but as I understand I should use $watch if I want to observe other things like attributes/properties with the {{ }} brackets.

Please see my plunckr (script.js) to see what my directive achieves so far: http://plnkr.co/edit/oaiJaQDCfrrfnscf8Y12?p=catalogue

It defines a special way to create a tooltip as it assembles a HTML out of the controller and puts some data out of the HTML in it (as a name, a description and an image).

I would like to observe a tooltip with its tt_isOpen attribute and exclude all other from being displayed.

The desired behaviour seems to come from "hover". But how can I determine how long the tooltip window will remain open? I would like the tooltip window while hovering over itself. Is that possible even if tooltip window is out of the area of the location of the area where it had been triggered (the area being hovered)?

Pille
  • 1,123
  • 4
  • 16
  • 38

1 Answers1

0

You can configure the tooltip directive from Angular UI to show/hide based on custom events.

This Plnkr does just that. It defines open/close events:

app.config(function($tooltipProvider) {
   $tooltipProvider.setTriggers({'open':'close'});
});

It sets the attribute tooltip-trigger on the directive (and an extra class):

<input type="text" value="Hover me!" tooltip="See? " tooltip-trigger="open" tooltip-placement="bottom" class="form-control has-tooltip" />

And then it triggers these events on hover and on the right elements:

$('.has-tooltip').hover(function() {
  $('.has-tooltip').not(this).trigger('close');
  $(this).trigger('open');
});

If you want to do it without JQuery, one way would be to register all your tooltips to a service:

angular.directive("hasTooltip",function (tooltipService) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            tooltipService.register(element);
        }
    }
});

This service could keep track of all tooltips and from there you could trigger the right events on the right elements.

NB: The tooltip directive expects these events to be thrown outside of the Angular $digest cycle, so you can't trigger the popups with ng-click or other Angular constructs.

Pieter Herroelen
  • 5,977
  • 2
  • 29
  • 37
  • (deleted my last comment as you changed your answer) Thank you very much for your code example. How would I accomplish this without jquery (only JS/angularJS)? – Pille Mar 01 '14 at 13:24
  • Do you have an idea how to accomplish this with angularFS? – Pille Mar 04 '14 at 12:44
  • You could create a directive which registers its element to a service and then have that service trigger the right events – Pieter Herroelen Mar 04 '14 at 14:37
  • I am already using a directive to generate attributes for a tooltip, see my above plunkr. I do that because there is an array of divs to which I like to add a tooltip to each. How would I register a service? I am not familiar with those. – Pille Mar 04 '14 at 20:02
  • Thank you very much for your edit. As I have already a directive how can I handle that? I think I could inject it with the directive I already have that way: app.directive("tooltipView", function($compile, tooltipService) { return { restrict: "AEC", link: function(scope, element, attrs) { var tooltipContent = scope.contentHTML; – Pille Mar 05 '14 at 11:21
  • Please ask this as a new question. It's hard to discuss this in the comments and I don't want to keep updating and elaborating an answer that already answers the question that was posted originally. – Pieter Herroelen Mar 06 '14 at 15:11
  • Could you please accept the answer if you believe it answers the original question? Thanks – Pieter Herroelen Apr 10 '14 at 14:58