工具提示在 Safari / iPad 上未按预期工作答案

【问题标题】：Tooltips not working as expected on Safari / iPad工具提示在 Safari / iPad 上未按预期工作
【发布时间】：2018-02-26 08:52:50
【问题描述】：

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

但是当涉及到 iPad、iPhone 和 safari（有时甚至是 chrome）时，我遇到的问题是按钮上的工具提示突然需要点击 2 次才能按下按钮。单击会弹出工具提示，然后单击按钮。

<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 工具提示组件有建议吗？`

【问题讨论】：

你能解决这个问题吗？
不——我们最终只使用了 HTML 标准工具提示

标签： javascript jquery tooltip

【解决方案1】：

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

<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 仅触发工具提示。链接没有被关注。需要第二次点击才能触发链接。

别问我为什么，我终于用这个配置“解决”了：

将以下 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 上的观察结果

无延迟：需要轻按 2 次li>
"show":100：需要轻按 2 次li>
"show":300：需要点击 1 次

我终于把它设置为 400 毫秒，似乎没问题。

【讨论】：