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-width
dé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:
- 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 avec
data-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)
- Si vous êtes déterminé à utiliser ce concept d'infobulle d'une ligne, couvrez-en six en utilisant une
@media
requê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;
}
}