Solución:
Nota: Solución para Bootstrap 3.0 ~ 3.2
Necesitas crear un elemento dentro de un td y aplicarle una información sobre herramientas, como esta, porque una información sobre herramientas en sí misma es un div, y cuando se coloca después de un td elemento frena el diseño de la mesa.
Este problema se introdujo con la última versión de Bootstrap. Hay discusiones en curso sobre correcciones en GitHub aquí. Con suerte, la próxima versión incluye los archivos corregidos.
Nota: Solución para Bootstrap 3.3+
Solución simple
En el .tooltip() llamar, configurar el container opción a body:
$(function () {
$('[data-toggle="tooltip"]').tooltip({
container : 'body'
});
});
Alternativamente, puede hacer lo mismo usando el data-container atributo:
<p data-toggle="tooltip" data-placement="left" data-container="body" title="hi">some text</p>
¿Por qué funciona esto?
Esto resuelve el problema porque, de forma predeterminada, la información sobre herramientas tiene display: block y el elemento se inserta en el lugar desde el que se llamó. Debido a la display: block, afecta el flujo de la página en algunos casos, es decir, empuja otros elementos hacia abajo.
Al establecer el contenedor en el elemento del cuerpo, la información sobre herramientas se agrega al cuerpo en lugar de desde donde se llamó, por lo que no afecta a otros elementos porque no hay nada que “empujar hacia abajo”.
- Documentación de información sobre herramientas de Bootstrap
Nota: Solución para Bootstrap 3.3+
Si desea evitar romper la tabla al aplicar una información sobre herramientas a un <td> elemento, puede usar el siguiente código:
$(function () {
$("body").tooltip({
selector: '[data-toggle="tooltip"]',
container: 'body'
});
})
Tu html podría verse así:
<td data-toggle="tooltip" title="Your tooltip data">
Table Cell Content
</td>
Esto incluso funciona con contenido cargado dinámicamente. Por ejemplo en uso con tablas de datos