Tooltips not working as expected on Safari / iPad

I have tried different forms of tooltip, and they all work fine in Chrome or in browsers, on android etc..

But when it comes to iPad, iPhone and safari (sometimes even chrome) I get the problem that tooltip on a button will suddenly require 2 clicks to press the button. One click brings up the tooltip and the other press the button.

<button href="#mail-wrapper" 
        class="book-button book-text-button col-std-mail" 
        ng-click="vm.mailButton=true;" 
        uib-popover="Send Mail to Tenant" 
        popover-trigger="'mouseenter'">
        <md-icon class="material-icons book-material" aria-label="Mail" role="img">mail</md-icon>
        MAIL
</button>

Does anyone have a suggestion to a tooltip component for angular, jquery, js which works on safari / iOS?`

Solution

I see the same behavior, using bootstrap4 and tooltips on links.

<script>$(function () {$('[data-toggle="tooltip"]').tooltip()})</script>
<a href="mylink" data-toggle="tooltip" data-placement="bottom" title="my tooltip text">my link or icon</a>

Result: Tap 1 triggers the tooltip only. The link is not followed. A 2nd tap is required to triggers the link.

Don't ask me why, but I finally "solved" it using this configuration:

add the following CSS class to my link cursor:pointer
Add some config to the tooltip call: trigger:"hover" and delay:{"show":400,"hide":800}

Complete solution is

<script>$(function () {
    $('[data-toggle="tooltip"]').tooltip({trigger:"hover",
                                          delay:{"show":400,"hide":800}})})</script>
<a href="mylink" class="perso-IOSpointer" data-toggle="tooltip" data-placement="bottom" title="my  tooltip text">my link or icon</i></a>

I tried to change the delay an here are my observation on several iPhones

no delay: 2 taps required
"show":100: 2 taps required
"show":300: 1 tap required

I finally set it to 400ms and it seems to be fine.