Showing multiple tooltips at one time in angularJS

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

Answers


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.


Need Your Help

Firefox: window.open prevents img.src from loading

javascript image firefox window.open

I've heard some rumors I can't seem te replicate. And now I'm curious if any of you have experiences with this issue.

iphone Mail App Popup style alertview

iphone objective-c ios xcode ipad

Im having a blonde moment i think. What is the control the the iPhone Mail app uses when you click Edit -> select an email -> than click delete. A popup comes up saying "Delete Message" or "Cancel"...