工具提示在 Safari/iPad 上无法按预期工作 [英] Tooltips not working as expected on Safari / iPad

问题描述

我尝试了不同形式的工具提示，它们在 Chrome、浏览器、Android 等中都可以正常工作.

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

但是当涉及到 iPad、iPhone 和 safari(有时甚至是 chrome)时，我遇到了一个问题，即按钮上的工具提示突然需要点击 2 次才能按下按钮.一键弹出工具提示，另一次按下按钮.

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>

有人对适用于 safari/iOS 的 angular、jquery、js 的工具提示组件有什么建议吗?`

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

推荐答案

我看到了同样的行为，在链接上使用 bootstrap4 和工具提示.

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>

结果:点击 1 仅触发工具提示.没有关注链接.需要第二次点击才能触发链接.

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:

• 将以下 CSS 类添加到我的链接光标:指针
• 向工具提示调用添加一些配置:trigger:"hover" 和 delay:{"show":400,"hide":800}

完整的解决方案是

<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>

我试图改变延迟，这是我对几部 iPhone 的观察

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

• 无延迟:需要点击 2 次
• "show":100:需要 2 次点击
• "show":300:需要 1 次点击

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

我最终将其设置为 400 毫秒，似乎没问题.

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

这篇关于工具提示在 Safari/iPad 上无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！