手动隐藏引导程序工具提示

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>

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

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

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

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

如何确保设备一旋转，字形1就能正常工作？

Answer 1

使用两个不同的元素来制作图标上的工具提示。首先为图标添加一个"i"标记，然后用带有工具提示属性的"span"标记将其包裹起来。

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

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