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

Nota:
Dependiendo de su versión de Bootstrap (anterior a la 3.3 o no), es posible que necesite una respuesta diferente.
Presta atención a las notas.

Cuando activo tooltips (coloca el cursor sobre la celda) o popovers en este código, el tamaño de la tabla está aumentando. ¿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 el consejo!

Author: zessx, 2012-11-07
Source

6 answers

Nota: Solución para Bootstrap 3.0 ~ 3.2

Necesita crear un elemento dentro de un td y aplicarle una descripción de herramienta, como este, porque una descripción de herramienta en sí es un div, y cuando se coloca después de un elemento td 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í. Esperemos que la próxima versión incluya los archivos fijos.

 84
Author: Devellar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-19 17:00:40

Nota: Solución para Bootstrap 3.3 +

Solución simple

En la llamada .tooltip(), establezca la opción container en body: 

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

Alternativamente puedes hacer lo mismo usando el atributo data-container: 

<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 página en algunos casos, es decir, empujando otros elementos caídos.

Al establecer el contenedor en el elemento body, la información emergente 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".

 82
Author: MrCode,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-19 17:01:03

Nota: Solución para Bootstrap 3.3 +

Si desea evitar romper la tabla al aplicar una descripción emergente a un elemento <td>, 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 datatables

 14
Author: shock_gone_wild,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-24 22:39:05

Me gustaría añadir algo de precisión a la respuesta aceptada, decidí utilizar el formato de respuesta para mayor facilidad.

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 su <td> muestre la información sobre herramientas (debido a Bootstrap CSS). Una forma sencilla de hacerlo es transferir el relleno de <td> a wrapper :

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'
    });
});
 9
Author: zessx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-19 16:59:26

Debe inicializar Tooltip dentro de la función datatable fnDrawCallback

"fnDrawCallback": function (data, type, full, meta) { $('[data-toggle="tooltip"]').tooltip({ placement: 'right', title: 'heyo', container: 'body', html: true }); },

Y defina su columna de la siguiente manera

 {
      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>";
    }
 },
 0
Author: Nikunj Patel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-23 12:46:46

Si está utilizando datatable para la tabla, entonces será use full

$('#TableId').DataTable({
                "drawCallback": function (settings) {
                    debugger;
                    $('[data-toggle="tooltip"]').tooltip({
                        container: 'body'
                    });

                }
            });
 0
Author: Rajdip Khavad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-22 06:02:45