83 votes

Mikhail Erofeev avatar

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

Demandé el 7 de Novembre, 2012
Quand la question a-t-elle été
16054 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

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

Lorsque j'active les infobulles (survol de la cellule) ou les popovers dans ce code, la taille du tableau augmente. Comment puis-je éviter cela ?

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 en conseil !

Demandé el 7 de Novembre, 2012 par Mikhail Erofeev

0 votes

Avatar de Devellar

De quelle taille supplémentaire parlez-vous exactement ? js génère 100 cellules dans une ligne sous la ligne vide prédéfinie. J'ai créé un violon

Commenté el 7 de Novembre, 2012 par Devellar

0 votes

Avatar de Mikhail Erofeev

@Devellar, la taille augmente lors de l'activation de l'infobulle (survol de la cellule).

Commenté el 7 de Novembre, 2012 par Mikhail Erofeev

0 votes

Avatar de Rnk Jangir

@MikhaillErofeev J'ai aussi le même problème. Si vous le résolvez, dites-le moi.

Commenté el 22 de Novembre, 2012 par Rnk Jangir
Afficher 2 autres commentaires

Réponses

Trop de publicités?

93voto

MrCode avatar
MrCode Points 34968

Nota: Solution pour Bootstrap 3.3+

Une solution simple

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

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

Vous pouvez également procéder de la même manière en utilisant la fonction data-container attribut :

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

Pourquoi cela fonctionne-t-il ?

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 de la display: block Dans certains cas, il affecte le flux de la page, en repoussant d'autres éléments vers le bas.

En fixant le conteneur à l'élément body, l'info-bulle est ajoutée au body au lieu de l'endroit d'où elle a été appelée, de sorte qu'elle n'affecte pas les autres éléments car il n'y a rien à "pousser vers le bas".

Répondu el 13 de Février, 2015 par MrCode (34968 Points )

3 votes

Avatar de Amy Patterson

Merci ! Cela a parfaitement fonctionné.

Commenté el 23 de Mars, 2015 par Amy Patterson

0 votes

Avatar de R. Mo

Merci ! L'option data-toggle="tooltip" a fonctionné mais pas l'option container : 'body' .

Commenté el 26 de Janvier, 2016 par R. Mo

0 votes

Avatar de Viky293

Merci beaucoup, cela m'a fait gagner du temps :)

Commenté el 1 de Février, 2016 par Viky293
Afficher 1 autres commentaires

91voto

Devellar avatar
Devellar Points 528

Nota: Solution pour Bootstrap 3.0 ~ 3.2

Vous devez créer un élément à l'intérieur d'un td et lui appliquer une info-bulle, comme este parce qu'une infobulle est elle-même un div, et lorsqu'elle est placée après un td élément il freine la mise en page du tableau.

Ce problème a été introduit avec la dernière version de Bootstrap. Il y a des discussions en cours concernant les corrections sur GitHub ici . Espérons que la prochaine version inclura les fichiers corrigés.

Répondu el 7 de Novembre, 2012 par Devellar (528 Points )

58 votes

Avatar de Domenic

Depuis le lien GitHub : La solution à partir de la version 2.3.x est de définir l'option de conteneur de l'infobulle/du popover sur body. Par exemple : $(...).tooltip({container : 'body'}) ; Ou en utilisant un attribut data-* dans le HTML : data-container="body".

Commenté el 24 de Mai, 2013 par Domenic

5 votes

Avatar de Timm

@Domenic Ceci devrait être une réponse, et ensuite marqué comme la solution correcte. Ça marche.

Commenté el 19 de Juin, 2013 par Timm

1 votes

Avatar de cmario

S'il vous plaît, ajoutez ceci comme réponse, beaucoup plus facile pour les futurs développeurs.

Commenté el 22 de Mars, 2016 par cmario

17voto

shock_gone_wild avatar
shock_gone_wild Points 4282

Nota: Solution pour Bootstrap 3.3+

Si vous voulez éviter de briser le tableau lorsque vous appliquez une infobulle à un fichier <td> vous pouvez utiliser le code suivant :

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

Votre 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, dans l'utilisation de tables de données

Répondu el 19 de Janvier, 2016 par shock_gone_wild (4282 Points )

1 votes

Avatar de sebasira

Merci. Je suis enfin capable d'utiliser l'infobulle avec les tables de données.

Commenté el 22 de Mars, 2019 par sebasira

9voto

zessx avatar
zessx Points 17769

Je voudrais ajouter une précision à la réponse acceptée, j'ai décidé d'utiliser le format de réponse pour la lisibilité.

Nota: Solution pour Bootstrap 3.0 ~ 3.2

En ce moment même, La solution consiste à envelopper votre infobulle dans un div. mais il faudra y apporter quelques modifications si vous voulez que l'ensemble de votre système de gestion de l'eau soit efficace. <td> pour afficher l'infobulle (à cause de la CSS de Bootstrap). Une façon simple de le faire est de transférer <td> Le remplissage de l'enveloppe de l'appareil :

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'
    });
});
Répondu el 18 de Mars, 2013 par zessx (17769 Points )

0 votes

Avatar de shock_gone_wild

Si vous voulez que l'ensemble du <td> affiche l'infobulle, il suffit d'appliquer l'infobulle directement à l'élément td.

Commenté el 19 de Janvier, 2016 par shock_gone_wild

0 votes

Avatar de zessx

@shock_gone_wild Ce n'est pas le problème. Appliquer une infobulle à n'importe quel <td> brisera l'ensemble de la table, comme indiqué dans la question initiale et dans toutes les réponses. C'est pourquoi nous avons tous choisi d'ajouter un autre élément à l'intérieur. Cela dit, je ne suis pas au courant des nouveautés de Bootstrap 4, et ce bug a peut-être été corrigé.

Commenté el 19 de Janvier, 2016 par zessx

0 votes

Avatar de shock_gone_wild

Non, cela ne cassera pas le tableau si vous ajoutez container : 'body' . Voir ma réponse ici. stackoverflow.com/a/34882401/3927116

Commenté el 19 de Janvier, 2016 par shock_gone_wild
Afficher 4 autres commentaires

2voto

Rajdip Khavad avatar
Rajdip Khavad Points 197

Si vous utilisez un datatable pour une table, il sera utilisé dans son intégralité.

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

                }
            });
Répondu el 22 de Septembre, 2018 par Rajdip Khavad (197 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X