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

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?

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; 
}

Sur BS3

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

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;
    }
}

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.

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

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/

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.

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.

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 */ 
}

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.

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;
}

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 ).

BS3:

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

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>

Essayez ce code,

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

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  dans chaque ligne de texte.

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." />

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;
}

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%;
}

Avec Bootstrap 4 j'utilise

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

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

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