Nota:
Dependiendo de su versión de Bootstrap (anterior a 3.3 o no), es posible que necesite una respuesta diferente.
Preste atención a las notas.
Cuando activo la información sobre herramientas (coloco el cursor sobre la celda) o ventanas emergentes en este código, el tamaño de la tabla aumenta. ¿Cómo puedo evitar esto?
Aquí emptyRow - función para generar tr con 100
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script type="text/javascript" language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script>
<style>
#matrix td {
width: 10px;
height: 10px;
border: 1px solid gray;
padding: 0px;
}
</style>
<script>
function emptyRow() {
str = '<tr>'
for (j = 0; j < 100; j++) {
str += '<td rel="tooltip" data-original-title="text"></td>'
}
str += '</tr>'
return str
}
$(document).ready(function () {
$("#matrix tr:last").after(emptyRow())
$("[rel=tooltip]").tooltip();
});
</script>
</head>
<body style="margin-top: 40px;">
<table id="matrix">
<tr>
</tr>
</table>
</body>
</html>
gracias en consejo!
Respuestas:
Necesita crear un elemento dentro de un
tdy aplicarle una información sobre herramientas, como esta , porque una información sobre herramientas en sí es un div, y cuando se coloca después de untdelemento, frena el diseño de la tabla.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 arreglados.
fuente
Solución simple
En la
.tooltip()llamada, configure lacontaineropción parabody:$(function () { $('[data-toggle="tooltip"]').tooltip({ container : 'body' }); });Alternativamente, puede hacer lo mismo utilizando el
data-containeratributo:<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: blocky el elemento se inserta en el lugar desde el que se llamó. Debido adisplay: blockello, 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".
fuente
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
fuente
Me gustaría agregar algo de precisión a la respuesta aceptada, decidí usar el formato de respuesta para facilitar la lectura.
En este momento, envolver su información sobre herramientas en un div es la solución , pero necesitará algunas modificaciones si desea que todo
<td>muestre la información sobre herramientas (debido a Bootstrap CSS). Una forma sencilla de hacerlo es transferir<td>el relleno al contenedor:HTML
<table class="table table-hover table-bordered table-striped"> <tr> <td> <div class="show-tooltip" title="Tooltip content">Cell content</div> </td> </tr> </table>JS (jQuery)
$('.show-tooltip').each(function(e) { var p = $(this).parent(); if(p.is('td')) { /* if your tooltip is on a <td>, transfer <td>'s padding to wrapper */ $(this).css('padding', p.css('padding')); p.css('padding', '0 0'); } $(this).tooltip({ toggle: 'toolip', placement: 'bottom' }); });fuente
<td>elemento romperá toda la tabla, como se indica en la pregunta original, y todas las respuestas. Es por eso que todos hemos optado por agregar otro elemento en su interior. Dicho esto, no estoy al tanto de las novedades de Bootstrap 4, y es posible que este error se haya solucionado.containerintrodujo en 2014, 2 años después de esta pregunta. Gracias por su comentario, haré algunas ediciones para aclarar esta opción y precisar que este error no está relacionado con las últimas versiones de Bootstrap.Debe inicializar la información sobre herramientas dentro de la función de tabla de datos fnDrawCallback
"fnDrawCallback": function (data, type, full, meta) { $('[data-toggle="tooltip"]').tooltip({ placement: 'right', title: 'heyo', container: 'body', html: true }); },Y defina su columna como se muestra a continuación
{ targets: 2, 'render': function (data, type, full, meta) { var htmlBuilder = "<b>" + data + "</b><hr/><p>Description: <br/>" + full["longDescrioption"] + "</p>"; return "<a href='#' class='Name'>" + (data.length > 50 ? data.substr(0, 50) + '…' : data) + "</a>" + "<sup data-toggle='tooltip' data-original-title=" + htmlBuilder + ">"+ "<i class='ic-open-in-new ic' style='font-size:12px;margintop:-3px;'></i></sup>"; } },fuente
Si está utilizando la tabla de datos para la tabla, se utilizará por completo
$('#TableId').DataTable({ "drawCallback": function (settings) { debugger; $('[data-toggle="tooltip"]').tooltip({ container: 'body' }); } });fuente
Si está utilizando directivas bootstrap para AngularJS, use el atributo tooltip-append-to-body.
<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>fuente