Pregunta bootstrap "información sobre herramientas" y "popover" agregan tamaño adicional en la tabla


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

Cuando activo tooltips (pase el mouse sobre la celda) o popovers en este código, el tamaño de la tabla está aumentando. ¿Cómo puedo evitar esto?

Aquí emptyRow - function 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!


73
2017-11-07 11:01


origen


Respuestas:


Nota: Solución para Bootstrap 3.0 ~ 3.2

Necesita crear un elemento dentro de un td y aplicarle una información sobre herramientas, como esta, porque un tooltip en sí mismo es un div, y cuando se coloca después de un td elemento que frena el diseño de la mesa.

Este problema se presentó 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 corregidos.


84
2017-11-07 12:31



Nota: Solución para Bootstrap 3.3+

Solución simple

En el .tooltip() llamar, configurar el container opción de body:

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

Alternativamente, puede hacer lo mismo utilizando 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 donde fue llamado. Debido a la display: block, afecta el flujo de página en algunos casos, es decir, empuja otros elementos hacia abajo.

Al configurar 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 "presionar hacia abajo".


82
2018-02-13 07:59



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


13
2018-01-19 16:48



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

Nota: Solución para Bootstrap 3.0 ~ 3.2

Ahora mismo, envolver su información sobre herramientas en un div es la solución, pero necesitará algunas modificaciones si quiere su totalidad <td> para mostrar la información sobre herramientas (debido a Bootstrap CSS). Una forma simple de hacerlo es transferir <td>relleno de envoltura:

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
2018-03-18 15:55



Deberías inicializar Información sobre herramientas 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 define tu columna como abajo

 {
      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
2017-07-23 12:46