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


163

J'ai créé une info-bulle à l'aide de Twitter Bootstrap.

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

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


1
Pouvez-vous peut-être accepter une réponse? Cela aidera également les autres.
MERose

Réponses:


211

Remplacez simplement bootstrap.css

La valeur par défaut dans BS2 est max-width: 200px; Vous pouvez donc l'augmenter en fonction de vos besoins.

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

13
max-widthne fonctionne pas pour moi, mais widthfonctionne. Testé sur Chrome et IE9. Un indice?
Rosdi Kasim

2
Dans mon cas, définir à la fois max-width et width a bien fonctionné car .tooltip-inner était inférieur à max-width (200px) bien qu'il contenait beaucoup de textes.
Nobu

Il suffit d'ajouter! Important comme ça, cela fonctionnera avec une largeur maximale: 350px! Important;
Sohail Anwar

1
Pour toute personne ayant encore des problèmes avec max-widthet ne voyant pas la réponse de @ knobli ci-dessous, veuillez utiliser data-container="body"dans votre élément HTML.
kips15

La modification du CSS doit être le dernier recours. Jquery fournit des fonctionnalités pour modifier l'apparence de l'info-bulle, alors pourquoi ne pas l'utiliser?
E10

42

Sur BS3

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

28

Je me rends compte que c'est une question très ancienne, mais si je débarque ici, d'autres le feront aussi. Alors j'ai pensé que je pesais.

Si vous souhaitez que l'info-bulle ne réponde qu'à une seule ligne, quelle que soit la quantité de contenu que vous y ajoutez, la largeur doit être flexible. Cependant, Bootstrap initie l'info-bulle à 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-widthdéclare une taille de départ. Contrairement à la largeur max, comme certains le suggèrent, qui déclare une largeur d' arrêt . Selon votre question, vous ne devez pas déclarer de largeur finale, sinon le contenu de votre info-bulle finira par s'ajuster à ce stade. Au lieu de cela, vous utilisez une largeur infinie ou une largeur flexible.max-width: 100%;s'assurera qu'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.

GARDEZ À L'ESPRIT GARDEZ info-bulles ne sont pas destinées à contenir beaucoup de contenu. Cela pourrait sembler génial si vous aviez une longue chaîne sur tout l'écran. Et cela aura certainement un impact sur vos vues responsives, en particulier sur votre smartphone (largeur 320px).

Je recommanderais deux solutions pour perfectionner cela:

  1. Gardez le contenu de votre info-bulle au minimum afin de ne pas dépasser 320 px de large. Et même si vous faites cela, vous devez vous rappeler si l'info-bulle est placée à droite de l'écran et avecdata-placement:right , le contenu de votre info-bulle ne sera pas visible sur les smartphones (d'où la raison pour laquelle bootstrap les a initialement conçus pour être réactifs à son contenu et lui permettre de emballage)
  2. Si vous êtes déterminé à utiliser ce concept d'infobulle d'une ligne, couvrez-en six en utilisant une @mediarequête pour réinitialiser votre info-bulle pour l'adapter à 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;
    }
}

23

Vous devez é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 le div dans lequel l'info-bulle est conservée (l'info-bulle est ajoutée par javascript et n'appartient généralement à aucun conteneur.


2
Juste curieux, y a-t-il une raison particulière pour laquelle vous avez défini le style de substitution comme 'div [class = "tooltip-inner"]' et pas comme simple 'div.tooltip-inner'?
slawek

6
J'ai écrit ce code quand j'étais très nouveau en CSS, donc je ne me souviens pas de la raison ridicule qui m'a fait l'écrire de cette façon haha
nglinh

21

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();

18
data-container="body"seul l'a fait pour moi. Merci!
Izhaki du

17

Pour résoudre le problème de 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/


4
Meilleure réponse à mon avis car elle n'inclut pas le changement de CSS bootstrap.
Tim Scarborough

1
C'est la meilleure réponse pour moi, mais cela ne répond pas à la question
Bengala

C'est la meilleure solution que je pense. Il utilise la configuration de l'info-bulle à la place du remplacement CSS Bootstrap.
César León

C'est par FAAAR la meilleure réponse. Jquery fournit des fonctionnalités pour faire toutes sortes de choses dans l'info-bulle, alors pourquoi ne pas l'utiliser? La modification du CSS doit être le dernier recours.
E10 du

10

Une autre solution; créer une nouvelle classe (par exemple à l'échelle de l'info-bulle) 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, de sorte que le HTML ressemble en fait à 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>

Le CSS l'utilise pour accéder à l'élément adjacent (+) à .tooltip-wide, et à partir de là, navigue vers .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.


2
Excellente solution car vous pouvez choisir les info-bulles que vous souhaitez utiliser.
Will Schoenberger

1
Dans bootstrap 4, l'info-bulle est ajoutée au corps. Cependant, avec data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner tooltip-wide'></div></div>"et .tooltip-wide { max-width: 100%; min-width: 80%; }on peut le faire fonctionner.
Matteo Ferla

C'est le premier exemple réel que j'ai vu en utilisant des modèles avec des infobulles BS4. Belle démo et facilité d'ajout de classes personnalisées.
klewis

8

Vous pouvez modifier la classe css .tooltip-inner dans bootstrap.css. La largeur maximale par défaut est de 200 pixels. Vous pouvez modifier la largeur maximale en fonction de la taille souhaitée.


C'est génial d'ajuster la largeur! Merci! Ceci avec la réponse ci-dessus est la solution complète!
ATSiem

6
Comme le dit @nglinh: "Ce n'est pas vraiment recommandé". Vous ne voulez pas garder une trace de tous vos hacks lors de la mise à jour de bootstrap.
Valentin Despa

7

après quelques essais, cela a fonctionné le mieux pour moi:

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

6

Remplacez simplement la valeur par défaut max-widthpar ce qui correspond à 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 à la place. 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 les petits conteneurs (option 2)

Puisque Bootstrap ajoute l'info-bulle en tant que frère de la cible, il est contraint par l'élément conteneur. Si l'élément contenant est plus petit que votre max-width, alorsmax-width cela ne fonctionnera pas.

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

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

Astuce de pro: le conteneur peut être n'importe quel sélecteur, ce qui est bien lorsque vous ne voulez remplacer les styles que sur quelques info-bulles.


4

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

div.tooltip {
    width: 270px;
}

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

Ne devrait-il pas être de largeur minimale?
Rippo

4

Veuillez vous référer au post ci-dessous. La réponse de cmcculloh a fonctionné pour moi. https://stackoverflow.com/posts/31683500/edit

Comme indiqué dans la documentation , le moyen le plus simple de s'assurer que votre info-bulle ne s'enroule pas du tout est d'utiliser

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

Avec cela, vous n'avez pas à vous soucier des valeurs de dimension ou de quelque chose du genre. Le problème principal est que si vous avez une très longue ligne de texte, elle disparaîtra simplement de l'écran (comme vous pouvez le voir dans l' exemple JSBin ).



2

Sur Bootstrap 4, et si vous ne souhaitez pas modifier la largeur de toutes les info-bulles, vous pouvez utiliser un modèle spécifique pour l'info-bulle souhaitée:

<a href="https://stackoverflow.com/link" class="btn btn-info"
   data-toggle="tooltip"
   data-placement="bottom"
   data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
   title="This is a long message displayed on 400px width tooltip !"
>
    My button label
</a>


1

J'ai eu le même problème, mais toutes les réponses populaires - changer .tooltip-inner{width}pour ma tâche n'a pas réussi à faire le travail correctement. Quant aux autres info-bulles (c'est-à-dire 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, donc j'ai simplement remplacé tous les espaces entre les mots par &nbsp;dans chaque ligne de texte.


1

J'avais besoin d'ajuster la largeur de certaines info-bulles. Mais pas un cadre 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

La définition de la largeur maximale de la classe tooltip-inner ne fonctionnait pas pour moi , j'utilise bootstrap 3.2

Comment définir la largeur maximale ne fonctionne que si vous définissez la largeur de la classe parent (.tooltip).

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

ajoutez une largeur à la classe parent:

.tooltip {
  width:400px;
}

Ensuite, vous ajoutez la largeur maximale et changez l'affichage en bloc en ligne, de sorte qu'il n'occupera pas tout l'espace

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

Cela crée le chaos avec l'alignement de l'info-bulle.
Ben

0

Le mien où toutes les longueurs variables et une largeur maximale définie ne fonctionneraient pas pour moi, alors régler mon css à 100% a fonctionné comme un charme.

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

0

Avec Bootstrap 4 j'utilise

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}

-1

dans bootstrap 3.0.3, vous pouvez le faire en modifiant la classe popover

.popover {
    min-width: 200px;
    max-width: 400px;
}

3
La classe .popover ne s'applique pas aux info-bulles.
Adriaan Tijsseling
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.