title: Bootstrap 5 Tooltip not triggered when hovering over child element
body: <p>I'm using Bootstrap 5 and I'm trying to trigger a tooltip when I hover over an anchor tag which contains a Fontawesome Icon. However, when I hover over the part of the tag where the icon sits, the tooltip hides.</p>
  <p>I have the following anchor tag:</p>
  <pre><code>&lt;a href=&quot;https://twitter.com/mytwitterhandle&quot; target=&quot;_blank&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Tooltip on top&quot;&gt;
      Hovering over text will trigger the tooltip but it is removed when hovering over the icon... 
      &lt;i class=&quot;fab fa-fw fa-twitter&quot; aria-label=&quot;Visit Twitter Page&quot; data-original-title=&quot;&quot; title=&quot;&quot;&gt;&lt;/i&gt;
  &lt;/a&gt;
  </code></pre>
  <p>Here's the javascript to trigger it (taken from the official docs):</p>
  <pre><code>var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle=&quot;tooltip&quot;]'));
  
  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl);
  });
  </code></pre>
  <p>Any ideas?</p>
  <p>EDIT!</p>
  <p>OK, so I got around this by inserting the Fontawesome icon as a pseudo element. Would still be interested to hear if anyone has a solution though.</p>