Question

我尝试过不同形式的工具提示，它们在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的工具提示组件有建议？`

Answer 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类添加到我的链接cursor：pointer
在工具提示调用中添加一些配置：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次点击
"show":100：需要点击2次
"show":300：需要点击1次

我最终将其设置为400ms，这似乎很好。

工具提示在Safari / iPad上无法正常工作

1 个答案: