手動隱藏引導工具提示

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

手動隱藏引導工具提示

回答

相關問題