I'm dynamically populating a Bootstrap 4.6 modal dialog and the element with a tooltip is no longer showing the tooltip.

<div class="modal-tooltip text-center mb-2" data-toggle="tooltip" data-placement="top" data-html="true" title="<strong>Theme 1</strong><br><span class='small'>This is a longer description of the Theme</span>">
  <span class="card-text m-1 px-3 py-2 rounded" style="background-color: grey; color: white;">
    <strong><a class="text-white" href="/themes/1">Theme 1</a></strong>
  </span>
</div>

On previous advice from this website I added a handler for the loading of the modal dialog to activate the tooltips on the element:

(this is in RoR - hence on 'turbo links:load' event)

$(document).on('turbolinks:load',function() {

  // re-enable tooltips/popover on show modal
  // https://stackoverflow.com/questions/39960446/bootstrap-tooltip-doesnt-work-in-modal
  $('#my_lg_modal').on('shown.bs.modal', function() {      
    console.log("modal shown");
    $('[data-toggle="tooltip"]').tooltip()
    $('[data-toggle="popover"]').popover()
  });

});

I know the code is running when showing the dialog because the "modal shown" message is showing in console.

I also tried adding this CSS but I'm sure that's not the issue as the "title" displays as an unformatted mouseover text but not as a tooltip-formatted element.

// fix for tooltips in modal dialog
.modal-tooltip {
  z-index: 100000000; 
}

Thanks for any advice.