Estoy completando dinámicamente un cuadro de diálogo modal de Bootstrap 4.6 y el elemento con una información sobre herramientas ya no muestra la información sobre herramientas.

 <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>

Siguiendo los consejos anteriores de este sitio web, agregué un controlador para la carga del cuadro de diálogo modal para activar la información sobre herramientas en el elemento:

(esto está en RoR, por lo tanto, en el evento 'turbo links:load')

 $(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() }); });

Sé que el código se está ejecutando cuando se muestra el cuadro de diálogo porque el mensaje "modal mostrado" se muestra en la consola.

También intenté agregar este CSS, pero estoy seguro de que ese no es el problema, ya que el "título" se muestra como un texto al pasar el mouse sin formato, pero no como un elemento con formato de información sobre herramientas.

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

Gracias por cualquier consejo.