web-dev-qa-db-fra.com

Comment modifiez-vous la largeur et la hauteur des info-bulles de Twitter Bootstrap?

J'ai créé une info-bulle en utilisant Twitter Bootstrap.

L'info-bulle s'affiche avec trois lignes. Cependant, j'aimerais afficher l'info-bulle avec une seule ligne.

Comment changer la largeur de l'info-bulle? Est-ce spécifique à Twitter Bootstrap ou aux info-bulles elles-mêmes?

twitter-bootstraptooltip
135
onejigtwojig

Il suffit de remplacer bootstrap.css

La valeur par défaut dans BS2 est max-width: 200px; Vous pouvez donc l'augmenter avec tout ce qui vous convient.

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}
188
Valentin Despa

Sur BS3

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}
31
Shina

Vous devriez écraser les propriétés en utilisant votre propre css. ainsi:

div.tooltip-inner {
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #505050;
    font-size: 14px;
}

le sélecteur choisit la div pour laquelle l'info-bulle est tenue (l'info-bulle est ajoutée par javascript et n'appartient généralement à aucun conteneur.

22
nglinh

Je me rends compte que la question est très ancienne, mais si j’arrivais ici, les autres aussi. Alors j'ai pensé que je pèse po 

Si vous souhaitez que l'info-bulle ne réponde qu'à une seule ligne, quelle que soit la quantité de contenu que vous ajoutez, la largeur doit être flexible. Cependant, Bootstrap initialise l'info-bulle sur une largeur, vous devez donc au moins déclarer quelle sera cette largeur et la rendre flexible à partir de cette taille. Voici ce que je recommande:

.tooltip-inner {
    min-width: 100px;
    max-width: 100%; 
}

Le min-width déclare une taille de départ. Contrairement à max-width, comme le suggèrent certains autres, il déclare une largeur de stopping. Selon votre question, vous ne devriez pas déclarer une largeur finale, sinon le contenu de votre info-bulle sera renvoyé à la ligne. Au lieu de cela, vous utilisez une largeur infinie ou une largeur flexible. max-width: 100%; veillera à ce que, une fois l’info-bulle lancée à 100 pixels de large, elle grandira et s’adaptera à votre contenu, quelle que soit la quantité de contenu que vous y avez.

GARDER À L'ESPRIT Les infobulles ne sont pas conçues pour contenir beaucoup de contenu. Cela peut sembler génial si vous avez une longue ficelle sur tout l'écran. Et cela aura certainement un impact sur vos vues réactives, spécialement les smartphones (largeur 320px). 

Je recommanderais deux solutions pour parfaire ceci:

  1. Gardez le contenu de votre infobulle au minimum afin de ne pas dépasser 320 pixels de large. Et même si vous faites cela, vous devez vous rappeler que si l'info-bulle est placée à droite de l'écran et avec data-placement:right, le contenu de cette info-bulle ne sera pas visible dans les smartphones (d'où la raison pour laquelle bootstrap les a initialement conçus pour répondre à son contenu et le permettre.) Envelopper)
  2. Si vous souhaitez utiliser ce concept d’info-bulle sur une seule ligne, couvrez votre six en utilisant une requête @media pour réinitialiser votre infobulle afin qu’elle s'adapte à la vue du smartphone. Comme ça:

Ma démo ICI démontre la flexibilité et la réactivité des info-bulles en fonction de la taille du contenu et de la taille d'affichage de l'appareil

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}
20
LOTUSMS

Définissez la largeur maximale avec "important!" et utilisez data-container = "body"

Fichier CSS

.tooltip-inner {
    max-width: 500px !important;
}

Balise HTML

<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

Script JS

$('.tooltiplink').tooltip();
19
knobli

Pour résoudre le problème de la largeur, utilisez plutôt le code suivant.

$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});

exemple: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

15
戈晓伟

Une autre solution; créer une nouvelle classe (par exemple, tooltip-wide) en CSS:

.tooltip-wide + .tooltip > .tooltip-inner {
     max-width: 100%;
}

Utilisez cette classe sur les éléments pour lesquels vous souhaitez des info-bulles larges:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

L'info-bulle Bootstrap génère un balisage sous l'élément contenant l'info-bulle. Le code HTML ressemble donc à quelque chose comme ceci après la génération du balisage:

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">I am a long tooltip</div>
</div>

CSS l'utilise pour accéder à l'élément adjacent (+) vers .tooltip-wide, puis à partir de là pour accéder à .tooltip-inner avant d'appliquer l'attribut max-width Cela n'affectera que les éléments utilisant la classe .tooltip-wide, toutes les autres info-bulles resteront inchangées.

8
Are

Vous pouvez éditer la classe ct .tooltip-inner dans le fichier bootstrap.css. La largeur maximale par défaut est 200px. Vous pouvez modifier la largeur maximale à la taille souhaitée.

7
onejigtwojig

après quelques expériences, cela a fonctionné mieux pour moi:

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}
5
Xerus

Définissez la classe sur le div de l'info-bulle principale et sur l'info-bulle interne

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}
4
Junior

Remplacez simplement le max-width par défaut en fonction de vos besoins.

.tooltip-inner {
  max-width: 350px;
}

Quand max-width ne fonctionne pas (option 1)

Si max-width ne fonctionne pas, vous pouvez utiliser une largeur définie. C'est bien, mais vos info-bulles ne seront plus redimensionnées pour s'adapter au texte. Si vous n'aimez pas cela, passez à l'option 2.

.tooltip-inner {
  width: 350px;
}

Traiter correctement avec les petits conteneurs (option 2)

Étant donné que Bootstrap ajoute l'info-bulle en tant que frère de la cible, il est contraint par l'élément qui le contient. Si l'élément contenant est plus petit que votre max-width, alors max-width ne fonctionnera pas.

Donc, quand max-width ne fonctionne pas, il vous suffit de changer la container:

<div class="some-small-element">
  <a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>

Astuce: le conteneur peut être n’importe quel sélecteur, ce qui est bien quand vous voulez seulement remplacer les styles dans quelques info-bulles.

4
Anson

S'il vous plaît se référer à la poste ci-dessous. La réponse de cmcculloh a fonctionné pour moi . https://stackoverflow.com/posts/31683500/edit

Comme indiqué dans de la documentation , le moyen le plus simple de s’assurer que votre infobulle n’a pas d’emballage, c’est d’utiliser

.tooltip-inner {
    max-width: none;
    white-space: nowrap;
}

Avec cela, vous n’aurez plus à vous soucier des valeurs de dimension ou de ce genre. Le problème principal est que si vous avez une très longue ligne de texte, elle disparaîtra de l’écran (comme vous pouvez le voir dans Exemple de JSBin ).

2
Rajasekar Kalisamy

BS3:

.tooltip-inner { width:400px; max-width: 400px; }
2
Till Hess

J'ai eu le même problème, mais toutes les réponses populaires - changer .tooltip-inner{width} pour ma tâche a échoué à faire le travail correctement. Quant aux autres info-bulles (plus courtes), la largeur fixe était trop grande. J'étais paresseux pour écrire des modèles/classes HTML séparés pour des zilions d'infobulles, aussi je viens de remplacer tous les espaces entre les mots par&nbsp;dans chaque ligne de texte. 

1
Ignas

Essayez ce code,

.tooltip-inner {
     max-width:350px !important;
}
1
Ragas Lamir

Le mien où toutes les longueurs variables et une largeur maximale définie ne fonctionnerait pas pour moi, donc régler mes css à 100% a fonctionné à merveille.

.tooltip-inner {
    max-width: 100%;
}
0
shaun

Définir la max-width de la classe tooltip-inner n'a pas fonctionné pour moi , J'utilise bootstrap 3.2

Certains comment paramètre max-width ne fonctionne que si vous définissez la largeur de la classe parente (.tooltip).

Mais alors toutes les info-bulles deviennent la taille que vous spécifiez. Alors voici ma solution:

ajoutez une largeur à la classe parente:

.tooltip {
  width:400px;
}

Ensuite, vous ajoutez la largeur maximale et modifiez l'affichage en inline-block, afin qu'il n'occupe pas tout l'espace 

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}
0
Daniel

Je devais ajuster la largeur de certaines info-bulles. Mais pas un paramètre global. Alors j'ai fini par faire ceci:

CSS

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

JQuery

$('[data-toggle="tooltip"]')
    .tooltip()
    .on('shown.bs.tooltip', function(e) {
        /**
         * If the item that triggered the event has class 'large-tooltip'
         * then also add it to the currently open tooltip
         */
        if ($(this).hasClass('large-tooltip')) {
            $('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
        }
    });

Html

<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
0
Julesezaar