Comment changer la largeur et la hauteur des infobulles de Twitter Bootstrap?

Question

J'ai créé une infobulle en utilisant Twitter Bootstrap.

L'infobulle s'affiche avec trois lignes. Cependant, je voudrais afficher l'infobulle avec seulement une ligne.

Comment puis-je changer la largeur de l'infobulle ? Est-ce spécifique à Twitter Bootstrap ou aux infobulles elles-mêmes ?

Answer 1

Il suffit de remplacer bootstrap.css

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

.tooltip-inner {
    max-width: 350px;
    /* Si max-width ne fonctionne pas, essayez d'utiliser width à la place */
    width: 350px; 
}

Answer 2

Sur BS3

.tooltip-inner {
    largeur minimale : 150px; /* largeur minimale */
}

Answer 3

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

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 où se trouve le tooltip (le tooltip est ajouté par du javascript et n'appartient généralement pas à un conteneur).

Answer 4

Vous pouvez modifier la classe css .tooltip-inner dans bootstrap.css. La largeur maximale par défaut est de 200px. Vous pouvez changer la largeur maximale à la taille désirée.

Answer 5

BS3:

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