Quiero colocar información sobre herramientas dentro de una ventana emergente hecha con bootstrap 5. El código de información sobre herramientas desaparece cuando abrí la ventana emergente (visto en el código fuente de la página). probado con safari y firefox. ambos no están funcionando. Lo probé con diferentes formas descritas en la documentación.

 <div id="popover_content_wrapper" class="m-0" hidden> <div class="po-content"> <a role="button">Bet now</a> <a role="button"><i class="fa fa-plus" data-bs-toggle="tooltip" data-bs-placement="top" title="tooltip 1"></i></a> <a role="button"><i class="fa fa-plus" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="tooltip 2"></i></a> <a role="button"><i class="fa fa-plus" data-bs-toggle="tooltip" data-bs-placement="top" data-title="tooltip 3"></i></a> <a role="button"><i class="fa fa-plus" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-original-title="tooltip 4"></i></a> </div> </div>

Este es mi script.js

 $('[data-bs-toggle="tooltip"]').tooltip(); $('[data-bs-toggle="popover"]').popover({ container: "body", html: true, content: function() { return $('#popover_content_wrapper').html(); } });

También cambié algunos estilos de la ventana emergente y la información sobre herramientas.

 .tooltip { z-index: 1151 !important; } .tooltip-inner { font-style: normal; font-size: 12px; line-height: 14px; color: #FFFFFF; background: #465263; border-radius: 2px; filter: drop-shadow(0px 1px 6px rgba(0, 0, 0, 0.5)); } .tooltip.bs-tooltip-right .tooltip-arrow::before { border-right-color: #465263 !important; } .tooltip.bs-tooltip-left .tooltip-arrow::before { border-left-color: #465263 !important; } .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #465263 !important; } .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #465263 !important; } .popover { width: 100%; max-width: 350px; height: 375px; background: #182028; border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0px 2px 10px #000000; border-radius: 2px; margin: 0; padding: 0; }

Uso las bibliotecas bootstrap-bundle 5.1.0, jquery 3.6.0, jquery-migrate 3.3.2, jquery-backstretch 2.1.18, waypoints 3.0.0, wow 1.1.2, jquery-form-validator 2.3.79, todo de cdnjs