web-dev-qa-db-fra.com

bootstrap "tooltip" et "popover" ajoutent une taille supplémentaire au tableau

Remarque:
Selon votre version de Bootstrap (antérieure à 3.3 ou non), vous aurez peut-être besoin d'une réponse différente.
Faites attention aux notes.

Lorsque j'active les info-bulles (survolant la cellule) ou que je survole dans ce code, la taille du tableau augmente. Comment puis-je éviter ça?

Ici emptyRow - fonction pour générer tr avec 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>

merci dans les conseils!

javascripttwitter-bootstraptwitter-bootstrap-3tooltip
77
Mishka

Remarque: Solution pour Bootstrap 3.0 ~ 3.2

Vous devez créer un élément dans une td et y appliquer une info-bulle, comme this , car une info-bulle est elle-même un div et, lorsqu'elle est placée après un élément td, elle freine la présentation du tableau.

Ce problème a été introduit avec la dernière version de Bootstrap. Des discussions sont en cours sur les correctifs de GitHub ici . Espérons que la prochaine version inclue les fichiers corrigés.

86
Devellar

Remarque: Solution pour Bootstrap 3.3+

Solution simple

Dans l'appel .tooltip(), définissez l'option container sur body:

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

Vous pouvez également faire la même chose en utilisant l'attribut data-container:

<p data-toggle="tooltip" data-placement="left" data-container="body" title="hi">some text</p>

Pourquoi ça marche?

Cela résout le problème car, par défaut, l'info-bulle a display: block et l'élément est inséré à l'endroit d'où il a été appelé. En raison du display: block, cela affecte dans certains cas le flux de page, c’est-à-dire que vous poussez d’autres éléments.

En définissant le conteneur sur l'élément body, l'info-bulle est ajoutée au corps au lieu de l'endroit d'où elle a été appelée, de sorte que les autres éléments ne sont pas affectés, car il n'y a rien à "Abaisser".

88
MrCode

Remarque: Solution pour Bootstrap 3.3+

Si vous souhaitez éviter de casser la table lors de l'application d'une info-bulle à un élément <td>, vous pouvez utiliser le code suivant: 

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

Vous html pourrait ressembler à ceci:

<td data-toggle="tooltip" title="Your tooltip data">
    Table Cell Content
</td>

Cela fonctionne même avec du contenu chargé dynamiquement. Par exemple, utilisé avec datatables

14
shock_gone_wild

_ {J'aimerais ajouter une précision à la réponse acceptée, j'ai décidé d'utiliser le format de réponse pour plus de lisibilité.}

Remarque: Solution pour Bootstrap 3.0 ~ 3.2

Pour le moment, envelopper votre info-bulle dans un div est la solution , mais il faudra quelques modifications si vous voulez que votre <td> au complet affiche l'info-bulle (à cause de Bootstrap CSS). Une façon simple de le faire est de transférer le padding de <td> dans le 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
zessx

Si vous utilisez datatable pour table, il sera utilisé complètement

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

                }
            });
1
Rajdip Khavad

Si vous utilisez des directives d'amorçage pour AngularJS, utilisez l'attribut tooltip-append-to-body.

<td ng-repeat="column in row.columns" uib-tooltip="{{ ctrl.viewModel.leanings.tooltip }}" tooltip-append-to-body="true"></td>
0
Haider Abbas

Vous devez initialiser Tooltip inside datatable function fnDrawCallback

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

Et définissez votre colonne comme ci-dessous

 {
      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
Nikunj Patel