Bootstrap tooltip en posición incorrecta en la posición inicial, luego en posición correcta

Estoy usando la información sobre herramientas de la bootstrap de twitter en un div en una página web. La información sobre herramientas se inicializa, pero en la primera posición está en la posición incorrecta; sin embargo, en los elementos emergentes posteriores, la información sobre herramientas está en la posición correcta.

Creo que el problema está ocurriendo porque el div al que se adjunta la información sobre herramientas está absolutamente posicionado.

Aquí está la etiqueta div en mi html:

Así es como se muestra la información sobre herramientas en el primer desplazamiento: Así es como se muestra la información sobre herramientas en el primer desplazamiento.

Y aquí es cómo se muestra en cada hover después de eso: Y aquí es cómo se muestra en cada hover después de eso

(los tamaños no cambian solo el tamaño del recorte de la captura de pantalla)

Los estilos aplicados a la div son:

 #sample-menu { position: absolute; top: 95px; right: 608px; } 

Probablemente podría posicionar el div de manera diferente para hacer que esto funcione. Me pregunto por qué la información sobre herramientas parece funcionar perfectamente en el div posicionado absolutamente, pero solo después de la primera posición.

** Agregué un poco más de información sobre herramientas en divs que no están absolutamente posicionados y tengo el mismo problema (la primera aparición de la información sobre herramientas se quita de mi elemento, y luego, después de la primera aparición, es correcta). Tengo un svg en la página con elementos que se están agregando y dimensionando con javascript (d3). Parece que necesito llamar a algo para reposicionar la información sobre herramientas una vez que todos los elementos de la página hayan sido agregados / dimensionados, sin embargo, ninguna de las soluciones de reposicionamiento Bootstrap Tooltip o Tether funcionó para mí.

Lo siguiente me ha funcionado en el pasado para las sugerencias de herramientas que incluyen el posicionamiento absoluto:

 $('[data-toggle="tooltip"]').tooltip({ container: 'body' }); 

Acabo de activar este script después de que todo se haya procesado en la página y todo esté bien configurado. También en áreas donde hay una actualización de la información sobre herramientas, tengo que ejecutar esto nuevamente.

Aquí hay un codepen del problema original.

Hice la posición del cuerpo “relativa” para que los elementos de mi hijo pudieran posicionarse absolutamente de la manera que yo quería, y también había establecido el margen del cuerpo en “0 auto” para centrar el contenido. Estos estilos interfirieron con la solución de la opción de información sobre herramientas que Eric mencionó en su respuesta.

 /*original css*/ body { position: relative; width: 980px; /*set as important to work in codepen example*/ margin:0 auto !important; } #sample-menu{ position: absolute; top: 109px; left: 600px; } //js that didn't solve tooptip positioning issue $(function(){ $('[data-toggle="tooltip"]').tooltip({ container: 'body' }); }); 

Era una mala práctica tener ese estilo aplicado al cuerpo en primer lugar. Aquí hay un codepen que resuelve este problema y aún me da la apariencia y el comportamiento que quiero sin los problemas de información sobre herramientas. Agregué un contenedor alrededor del contenido para aplicar los estilos, y luego la solución “contenedor: ‘cuerpo'” de información sobre herramientas que Eric G sugirió funcionó.

 /*new css with styling on a container div instead of the body*/ .container { position: relative; width: 980px; margin:0 auto; } #sample-menu{ position: absolute; top: 109px; left: 600px; } //js now fixes the tooltip positioning issue $(function(){ $('[data-toggle="tooltip"]').tooltip({ container: 'body' }); });