0
87
ViewsProblema principal de ubicación de la información sobre herramientas de Bootstrap 5 cuando la página tiene un desplazamiento
Tengo un problema con la información sobre herramientas en el arranque cuando se fuerza la parte superior de la ubicación. Yo uso la última versión por ahora: 5.1.3
Intenté crear un código cortado, pero el problema no se puede reproducir en codepen, así que pegaré un código aquí con una muestra de video.
function initTooltips() { var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) tooltipTriggerList.forEach(function(tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }); } initTooltips(); .section { padding-top: 500px; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.js"></script> <div class="section"> <div class="row"> <div class="col-12 text-center mt-5 pt-5"> <button type="button" class="btn btn-secondary" id="test-btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip with button"> Tooltip on top </button> </div> </div> </div>Cuando desplazo la página un poco hacia abajo para ver el botón y paso el mouse sobre él, la información sobre herramientas aparece en la parte superior con un espacio igual a la posición de desplazamiento.
Traté de jugar con opciones de información sobre herramientas como "límite" y "contenedor", pero no ayuda mucho.
¿Tienes alguna idea sobre cómo solucionarlo?
1 answers
Answer question0
Mi problema estaba relacionado con el error que cometí en la plantilla de la aplicación principal.
Olvidé colocar:
<!DOCTYPE HTML>en la parte superior de la página HTML. Este simple error causó el problema. ¡La solución es simple pero tomó varios días de depuración! Con suerte, esta respuesta será útil para alguien.