Question

我在页面上的元素上有Bootstrap工具提示，这些元素在移动设备上查看时行为不正常。

<span id="glyphicon1" class="glyphicon glyphicon-question-sign tooltip-anchor" data-placement="left" data-toggle="tooltip" title="tooltip1"></span>
<span id="glyphicon2" class="glyphicon glyphicon-question-sign tooltip-anchor" data-placement="left" data-toggle="tooltip" title="tooltip2"></span>
<script>
    $(function () {
            $('[data-toggle="tooltip"]').tooltip({
                'container': 'body',
            })
    }
</script>

如果通过触摸glyphicon1显示tooltip1，然后设备在显示时旋转，则tooltip1不再位于相对于glyphicon1的正确位置。

我通过在设备旋转时隐藏工具提示来规避这个问题。

$(window).on("orientationchange", function (event) {
  $('[data-toggle="tooltip"]').tooltip("hide");
});

这会隐藏工具提示确定，但现在通过触摸glyphicon1无法再显示工具提示1。如果我触摸glyphicon2来显示tooltip2，或者首先触摸页面上的任何其他位置，我可以像往常一样继续使用glyphicon1。我假设Bootstrap仍然认为tooltip1仍在显示，必须先隐藏。

如何在设备旋转后确保glyphicon1正常工作？

Answer 1

使用两个不同的元素在图标上制作工具提示。首先是＆＃34;我＆＃34;标记图标并用＆＃34; span＆＃34;包装它带有工具提示属性的标记。

＆＃13;

   $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });

＆＃13;

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


 <span data-toggle="tooltip" data-placement="bottom" title="tooltip1"><i class="glyphicon glyphicon-question-sign tooltip-anchor"></i></span>
    <span data-toggle="tooltip" data-placement="bottom" title="tooltip2"><i class="glyphicon glyphicon-question-sign tooltip-anchor"></i></span>

＆＃13;

手动隐藏引导工具提示

1 个答案: