Does not work with FastClick

[TheWebinator]

Hello :)

We are using the angular-tooltip in our web-application. The web-application works on desktop and as a mobile web-app on tablets (iPad and Surface). The tooltip worked for a long time without problems. Yesterday we included the FastClick to our angular-module. We downloaded the fastclick.js from this github: https://github.com/ftlabs/fastclick/tree/master/lib After this, we implemented follow code into our angular-module:

angular.module("Master", ["controllers", "720kb.tooltips"]).run(function() { FastClick.attach(document.body); });

The FastClick worked fine on the tablet, but than we recognized, that our tooltips don't work on the tablet with the implemented FastClick. It only worked on the desktop. We removed the FastClick to test this, and than the tooltip worked again. So the problem may be, that the FastClick do some things faster than the tooltip so it can't popup. The FastClick is very important for mobile-apps so we need it. But, also we need the tooltip. Now we test a workaround: We are trying to set a timeout of 0.2 or 0.3 seconds on the divs, which have a tooltip. So the FastClick would work on all other click-events. We hope this workes. We would anyway be grateful if you could resolve the issue, because this is only a workaround.

Thanks and have a nice day!

• TheWebinator :)

[TheWebinator]

Hello again :)

The FastClick brings a class, which ignores the FastClick on an element. So our workaround isn't needed. But the fastclick-event does still not work, because with this class we still have the delay of 0.2 or 0.3 seconds on a click, which contains to popup a tooltip. But it works without a workaround, that will bring an over-kill :D

Cheers - TheWebinator :)

[45kb]

Hi @TheWebinator i don't understand if you fixed this or not?

However, i may be wrong, but you really don't need fastclick in angular apps, check the documentation for ngClick https://docs.angularjs.org/api/ngTouch/directive/ngClick

The 300ms delay seems to be only a bad memory ;)

[TheWebinator]

Hi @45kb

First thanks for your comment! :+1:

No, the error isn't fixed. If I include fastclick.js, than the tooltip doesn't work on touch devices. I just don't need my first workaround (implement a timeout on divs with popup and still use fastclick on the other), because the fastclick.js brings a class, which I can give to an element and then this element ignores the FastClick. Every element without this class still has the FastClick.

But, when I don't include the FastClick, I have a delay of 300ms and after I include the FastClick, theres really no delay, it's really faster! :) So, I looked at the ngTouch, doc: Have I understanded that right: When I include the ngTouch and give it to my module, I will not have a delay of 300ms and the tooltip would work also? I will test it right now and inform you. :)

Cheers - TheWebinator :)

[45kb]

@TheWebinator Hey, not quite sure if it will work with ngTouch just let know if you try ;)

thank you

[TheWebinator]

Hello @45kb

So I've tried it with the ngTouch:

• I removed the fastclick.js library and it's all classes in my elements
• Then I included the angular-touch.js and implemented the ngTouch
• I haven't got a delay of 300ms, so the ngTouch removes the delay
• The tooltips still don't work
• The ngTouch doesn't solve the issue

Solution: Include fastclick.js, so the delay of 300ms is gone and give a class to the elements, which have a tooltip, so there you have the delay and the tooltips works. In all other elements, which haven't got the class, the FastClick works, so you don't have the delay.

Maybe, you can solve this problem, so we haven't to give a class to some elements to stop the fastclick.

Thank you and cheers :)

[45kb]

@TheWebinator Hi, have you tried tooltip-show-trigger="touchstart" ?

Do you need to remove the delay on a mobile app/website correct?

[TheWebinator]

Hello @45kb

Another software engineer from our front-end team was testing the tooltip-show-trigger="touchstart". Now he's at home and I will ask him tomorrow what the result was.

Yes, on mobile app/website I must implement the fastclick.js or the ngTouch to remove the delay. Without this I have a delay on my mobile devices. The problem is, when I remove the delay, the click-event, which opens the tooltip doesn't open it. I think, the fastclick-event is to fast, to handle the tooltip. So the function can't be called correctly or something else. Fact is, if I remove the fastclick or ngTouch and I have the delay and with this, the click-event on the tooltip works, so the tooltips comes to the screen.

Cheers :)

[45kb]

Ok let me know if you fix using tooltip-show-trigger it should work with any event you pass in it :+1:

For example tooltip-show-trigger="click touchstart" should be ok both for mobile and desktop

[45kb]

@TheWebinator going to close the issue but feel free to comment and or re-open it :+1: