bootstrap "tooltip" y "popover" agregan tamaño extra en la tabla

82

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!

— mishka
fuente

¿Qué tamaño extra quieres decir exactamente? js genera 100 celdas en una fila debajo de la fila vacía predefinida. He creado un violín

— Devellar

@Devellar, el tamaño aumenta al activar la información sobre herramientas (pasar el cursor sobre la celda)

— mishka

@MikhaillErofeev También tengo el mismo problema, si lo resuelves, dímelo

— Rnk Jangir

@RonakJangir, vea la respuesta a continuación

— mishka

@MikhaillErofeev Solo quiero agregar información sobre herramientas en td, por lo que esta respuesta no es útil para mí. Por la solución se ha enviado a twitter bootstrap ver github.com/twitter/bootstrap/issues/5980

— Rnk Jangir

90

Nota: Solución para Bootstrap 3.0 ~ 3.2

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 un tdelemento, 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.

— Devellar
fuente

57

Desde el enlace de GitHub: la solución a partir de v2.3.x es establecer la opción de contenedor de la información sobre herramientas / popover en body. Por ejemplo: $ (...). Tooltip ({contenedor: 'cuerpo'}); O usando un atributo data- * en el HTML: data-container = "body"

— Domenic

5

@Domenic Esto debería ser una respuesta y luego marcarse como la solución correcta. Simplemente funciona.

— Timm

1

por favor agregue esto como respuesta, mucho más fácil para futuros desarrolladores

— cmario

89

Nota: Solución para Bootstrap 3.3+

Solución simple

En la .tooltip()llamada, configure la containeropción para body:

$(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 a display: 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".

Documentación de información sobre herramientas de Bootstrap

— MrCode
fuente

3

¡Gracias! Funcionó perfectamente.

— Amy Patterson

¡¡Gracias!! La opción data-toggle = "tooltip" funcionó, pero no la opción contenedor: 'body' ..

— R. Mo

Muchas gracias, esto me ahorró horas :)

— Viky293

1

Esto no funciona si su tabla está en modal, ya que la información sobre herramientas aparece en algún lugar de la página (probablemente todavía no la he encontrado). Caveat Emptor. Sin embargo, la respuesta aceptada todavía funciona, simplemente envuelva su contenido td en un div y aplique la información sobre herramientas a eso.

— Hippyjim

17

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

— shock_gone_wild
fuente

1

¡Gracias! Finalmente puedo usar información sobre herramientas con tablas de datos

— sebasira

9

Me gustaría agregar algo de precisión a la respuesta aceptada, decidí usar el formato de respuesta para facilitar la lectura.

Nota: Solución para Bootstrap 3.0 ~ 3.2

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'
    });
});

— zessx
fuente

si desea que el <td> completo muestre la información sobre herramientas, simplemente aplique la información sobre herramientas directamente al elemento td

— shock_gone_wild

@shock_gone_wild Ese no es el punto. La aplicación de información sobre herramientas a cualquier <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.

— zessx

no, no romperá la tabla si agrega contenedor: 'cuerpo'. Vea mi respuesta aquí. stackoverflow.com/a/34882401/3927116

— shock_gone_wild

1

Se 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.

— zessx

1

Acabo de agregar esto, porque una respuesta altamente votada ya usa la opción de contenedor. Y para los futuros lectores, esta información puede ser muy útil;)

— shock_gone_wild

1

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>";
    }
 },

— Nikunj Patel
fuente

Vota a favor de la parte fnDrawCallback y es el único lugar donde la inicialización de una información sobre herramientas BS con formato HTML funciona con una tabla de datos que tiene la paginación habilitada.

— Dibujó el

1

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'
                    });

                }
            });

— Rajdip Khavad
fuente

0

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>

— Haider Abbas
fuente