title: Manually hiding bootstrap tooltips
body: <p>I have Bootstrap tooltips on elements on my page that are misbehaving when viewed on a mobile device.</p>
  
  <pre><code>&lt;span id="glyphicon1" class="glyphicon glyphicon-question-sign tooltip-anchor" data-placement="left" data-toggle="tooltip" title="tooltip1"&gt;&lt;/span&gt;
  &lt;span id="glyphicon2" class="glyphicon glyphicon-question-sign tooltip-anchor" data-placement="left" data-toggle="tooltip" title="tooltip2"&gt;&lt;/span&gt;
  &lt;script&gt;
      $(function () {
              $('[data-toggle="tooltip"]').tooltip({
                  'container': 'body',
              })
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>If tooltip1 is displayed by touching glyphicon1 and then the device is rotated while it is being displayed, tooltip1 is no longer in the correct position relative to glyphicon1.</p>
  
  <p>I have circumvented this problem by hiding the tooltips when the device rotates.</p>
  
  <pre><code>$(window).on("orientationchange", function (event) {
    $('[data-toggle="tooltip"]').tooltip("hide");
  });
  </code></pre>
  
  <p>This hides the tooltip1 OK, but now the tooltip1 cannot be shown again by touching glyphicon1. If I touch glyphicon2 to show tooltip2, or touch anywhere else on the page first, I can then continue to use glyphicon1 as usual. I am assuming that Bootstrap still thinks that tooltip1 is still being displayed, and has to be hidden first.</p>
  
  <p>How can I ensure the glyphicon1 works correctly as soon as the device is rotated?</p>