Tooltip bug when hovering child node

Having a bunch of elements builded in this way:

<button type="button" class="btn btn-primary px-3 hasTooltip" title="Tooltip text" data-toggle="tooltip">
    <i class="fas fa-user m-0"></i>                                
</button>

<button type="button" class="btn btn-primary px-3 hasTooltip" title="Other tooltip text" data-toggle="tooltip">
    <span>Any child element</span>                                
</button>

So when I hover a tootlip target it shows the tooltip nicely. The problem is when I hover any child element of that tooltip element.

The element suddenly dissapears or is being repositioned at the top left corner of the view, breaking the entire behaviour of this Bootstrap component. No matters if it is an icon or a simply span node.

This issue isn’t reproducing in earlier versions of Bootstrap.

[bpobocha]

You can add ‘pointer-events: none’ to all elements inside the button. It helped me.

button *{
    pointer-events: none;
  }

[XhmikosR]

Duplicate of #31646