Estoy tratando de agregar algo de texto de cuerpo a una información sobre herramientas de Bootstrap, que de forma predeterminada solo contiene un título básico. Según la documentación relevante de Bootstrap 5 , parece que la forma más fácil de hacerlo es usar la opción de template :
template Base HTML to use when creating the tooltip. The tooltip's title will be injected into the .tooltip-inner. .tooltip-arrow will become the tooltip's arrow. The outermost wrapper element should have the .tooltip class and role="tooltip". Sin embargo, tratar de insertar el texto del cuerpo que quiero pasándolo a la variable de template junto con el resto del JavaScript que inicializa la información sobre herramientas no hace ninguna diferencia. Todo lo que se muestra es el contenido de bs-data-title , y sin eso no se muestra ninguna información sobre herramientas (como aclara la documentación).
Mi marcado:
<div class="text-center mt-3 mb-4 mb-lg-0"><span href="#" class="badge security-tooltip" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" data-bs-offset="0,12" title="<h6>Secure Payment</h6>"> <i class="fas fa-lock"></i>SECURE PAYMENT</></span> </div>El JavaScript que estoy usando para inicializar la información sobre herramientas:
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl, { template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner">All payment data is handled using secure, industry-standard 256-bit encryption.</div></div>', }); });¿Qué estoy haciendo mal y cómo lo logro exactamente?
Cambié el JS para especificar la plantilla y el título por separado y muestra la información sobre herramientas. El título se especifica en el JS, así que lo eliminé del HTML y lo moví al JS.
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl, { template:'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner">', title:'<h6>Secure Payment</h6>All payment data is handled using secure, industry-standard 256-bit encryption.</div></div>', }); }); <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="text-center mt-3 mb-4 mb-lg-0"><span href="#" class="badge security-tooltip" style="color:red" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-html="true" data-bs-offset="0,12"> <i class="fas fa-lock"></i>SECURE PAYMENT</span> </div>