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

But when it es 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 ponent for angular, jquery, js which works on safari / iOS?`

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

But when it es 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 ponent for angular, jquery, js which works on safari / iOS?`

• javascript
• jquery
• tooltip

• Could you fix that? – Borzh Commented May 8, 2018 at 12:42
• Nope - we ended up using just the HTML standard tooltip – torbenrudgaard Commented May 13, 2018 at 22:41

1 Answer 1

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.