feat($tooltip): support for custom triggers

[joshdmiller]

The $tooltip service now has two ways to customize the default triggers.
The $tooltipProvider takes a trigger option and the *-trigger
attribute can be applied to a single element.

The $tooltipProvider's trigger option overwrites the default value
but the attribute will overwrite both.

A few logical default triggers are supported out of the box and have an
associated map to determine which hide trigger to use. mouseenter ->
mouseleave, focus -> blur, and click -> click. If any other
trigger is provided, it will be used to both show and hide the tooltip.

Custom hide triggers are not yet supported as they would require some
code trickery due to the way $observe works.

Closes #131

[joshdmiller]

There's a lot of code changing here because some things had to be re-ordered to make sense under this PR.

I also removed a bunch of duplicate tests that were a carryover from before we created the $tooltip service; for example, we don't need to test the popover-placement attribute if we test the tooltip-placement attribute because it's the same service code executing the exact same way from practically the exact same test (only "tooltip" replaced with "popover").

Also, as I mentioned when we created $tooltip, there is no documentation for using $tooltipProvider yet. After this PR or perhaps after #220 (which will also have a provider option), we should go back and add the documentation to the readme.

[pkozlowski-opensource]

@joshdmiller this all looks great. There is just one part of the (existing) code that made me think. See my comment in the commit. But yeh, this is not directly related to the change discussed here.

[pkozlowski-opensource]

Landed as b1ba821.

[jc-tzn]

Hi guys, I'm trying to set the trigger option within the controller by using $tooltip and $tooltipProvider, I tried everything that came to mind but I'm not sure of what I'm doing so I couldn't make it work so far.

Since multiple triggers isn't possible yet (I've seen it's on your TODO list), what I want to do is detecting in the controller if it's a mobile browser being used and set the trigger to click if so (instead of mouseenter).

Any thoughts on that?

[joshdmiller]

@jc-tzn The $tooltip service is used exclusively internally; you should never need to make use of that yourself. The $tooltipProvider can be used to configure global triggers, but providers are only available inside .config blocks.

I'm not sure what you mean by "multiple triggers", but each tooltip can also take a tooltip-trigger attribute, so you could easily use that to do what you need, e.g.:

.controller( 'MyCtrl', function ($scope, FeatureDetection) {
    if ( FeatureDetection.isMobile() ) {
      $scope.tooltipTrigger = 'click';
    } else {
      $scope.tooltipTrigger = 'mouseenter';
    }
});

And then:

<a tooltip="This is the tooltip" tooltip-trigger="{{tooltipTrigger}}">Hover</a>

[jc-tzn]

aah yes indeed elegant solution thanks :) (I'm still not totally accustomed to angular philosophy)

What I meant by "multiple triggers" was for example that the tooltip could be displayed on click as well as on mouseenter as the same time, but again your solution does the trick for me !

[monkeymonk]

Is there a way to manually trigger the tooltip/popover ?

I'm trying to find a way to trigger a tooltip/popover from another element.

e.g.

<div tooltip="something" tooltip-trigger="showTooltip">...</div>
<strong ng-mouseenter="showTooltip = 'true'">hover me</strong>

[krico]

@monkeymonk I want to do the same thing. No luck so far. 👍