手动隐藏引导工具提示

我在我的页面上使用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>

如果tooltip1通过触摸glyphicon1然后当正在显示它装置被旋转显示，tooltip1不再相对于正确位置glyphicon1英寸

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

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

这个隐藏tooltip1 OK，但现在tooltip1不能再通过触摸glyphicon1所示。如果我触摸glyphicon2来显示tooltip2，或者先触摸页面上的其他任何地方，我就可以照常继续使用glyphicon1。我假设Bootstrap仍认为tooltip1仍在显示，并且必须先隐藏。

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

来源

2016-01-13 tallpaul

哪个元素，你徘徊显示与HTML工具提示again.Update问题。 –

@AnilPanwar为了清晰起见，我添加了一些HTML标记 – tallpaul

您可以制作小提琴或在代码片段中插入代码吗？会更好地理解。 –

拿两个不同的元素来制作图标上的工具提示。首先为图标添加一个“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>

来源

2016-01-13 12:02:44

手动隐藏引导工具提示

回答

相关问题