[New Attribute] tooltip-show

[zhangoose]

This PR introduces the tooltip-show-tooltip attribute.

I'm not sure if this is a good use-case for everyone (or if there's already a way to do this functionality). This is just the solution we're using, but wondering if anyone else would find this helpful!

Intro / Problem

We wanted to use an external tooltip library instead of our own for hovering on vertical bars on our bar graphs. However, we also wanted to display the tooltip on top of the bar if the user hovered over some empty area on top of the shorter bars.

Solution

Added the tooltip-show-tooltip attribute to the tooltips directive which accepts a bool. Then, set a $scope variable that controls whether or not the tooltip is displayed. On mouse enter on the empty area on top of shorter bars, we set that variable to true (and on mouse leave, false). This way, the area in which the tooltip is displayed is not limited to what's in the <div tooltips>.

<div
  tooltips tooltip-template="i'm a tooltip"
  tooltip-show-tooltip="{{ isShow }}"
  tooltip-show-trigger="false"
  tooltip-hide-trigger="false"
>
  Toggle me by setting isShow
</div>

Here is a demo of using the tooltip-show-tooltip attribute on our app:

Towards the end, you can see that entering the empty area on top of the bar from the top triggers the tooltip.

Example (plnkr)

http://plnkr.co/edit/oSKh6sGjDjP2yXxKLtPw?p=preview

Thoughts

It's kind of messy how you have to do a "false" for both the show and hide trigger attributes, but please let me know your thoughts or comments! Especially if there's like a better way to do this with the existing functionality.

[45kb]

This is well done @zhangoose thanks a lot, could you just rename the attribute from tooltip-show-tooltip to tooltip-show ?

Also one scenario to check is: does the tooltip is shown as usual and by default if i don't specify the attribute?

[zhangoose]

@45kb Thanks for looking it over! Good call, made the change to tooltip-show and here's an updated plnkr where I try to use a normal hoverable tooltip.

http://plnkr.co/edit/JrhpBYkU2fcRVV5Z4Gnf

There's some inconsistencies in the function naming (ie onTooltipShowTooltip) since there's already an onTooltipShow.

[45kb]

@zhangoose thanks a lot, appreciated a lot, this attribute is a great introduction!

About the inconsistence you're right, maybe we should call onTooltipShow -> onTooltipOpening. Thank you for spotting it out i did not notice it at all :P

[45kb]

You can upgrade to v1.1.11

Last thing i noticed is that the attribute doesn't work if hide and show triggers are specified, it would be awesome to make this situation work the same:

<a tooltips tooltip-hide-trigger="mouseleave` tooltip-show-trigger="mouseenter" tooltip-show="false">

[zhangoose]

@45kb Nice!! ✨ Hmmm I'll make another PR later to try to fix those things.

[45kb]

@zhangoose that would be awesome !! thanks for your time 🙏