title: Bootstrap tooltip has persistence issues when link text wraps
body: <p>I am using Bootstrap 4 and have an issue with the tooltip text that pops up disappearing immediately in a certain situation.  I am using the bootstrap grid system, and when viewed on a small display, the text that should be hovered over / touched to have the tooltip pop up sometimes wraps across two lines (for example when viewed on a mobile device).  When that happens, if you touch the second of the two lines, the tooltip pops up and stays as expected, but when you touch the top line, it just pops up and disappears immediately.  I'm not sure how to have it stay visible in both cases.</p>
  <p>Here is an example portion of the code:</p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-6 col-md-5 col-lg-3&quot;&gt;
                  &lt;a href=&quot;#&quot; data-toggle=&quot;tooltip&quot; title=&quot;Tooltip text that pops up&quot;&gt;Text that wraps around in the grid&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class=&quot;col-6 col-md-5 col-lg-3&quot;&gt;
                  ${{form.input_cell(size=12)}}
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>