I have the following popover buttons in multiple areas of my pages. With onmouseenter and onmouseleave the popover is working just fine placing the info/tip popover next to the button/icon that was engaged. However when using the same button popovers in a modal the popovers are not appearing.

<button type="button" class="buttonHelp" id="buttonID5" onmouseenter="showPopup(this.id);" onmouseleave="hidePopup(this.id);" data-container="body" data-toggle="popover" data-placement="top" data-content="Expire Date: If set, this file will not be available/viewable after the specified date">
          <i class="iconHelpIcon icon-information-variant"></i>
      </button>

The JS:

  function showPopup(id) {
    document.getElementById(id).click() ;
  }
  
  function hidePopup(id) {
    var el = document.getElementById(id).click() ;
  }

I ‘think’ they are working but are hidden beneath the modal itself. I think this because I can see the showPopup() and hidePopup() being called in the dev browser whenever I roll my mouse through the button icon itself. In the modal popovers, I changed the data-container='modal-body' and it did not work. I even added z-index:1100; to the CSS buttonHelp (because the modal z-index is 1050), but it had no affect.

How can I fix this?