Comment puis-je faire en sorte que les info-bulles de Twitter Bootstrap ressemblent aux popovers (sans la ligne de titre)?
J'aimerais remplacer le Twitter Bootstrap info-bulle styles avec le liste des styles. Comment puis-je le faire?
Les info-bulles ressembler à ceci par défaut:
Popovers ressembler à ceci par défaut:
J'aimerais que mon info-bulles pour être blanc, avec une bordure grise, tout comme les popovers.
Pouvez-vous aider?
source d'informationauteur Ryan
Vous devez vous connecter pour publier un commentaire.
Si vous voulez changer le style de l'info-bulle elle-même, vous auriez à éditer le
.tooltip-inner
classe dans le bootstrap css du fichier ou de remplacer le.tooltip-inner
classe avec une classe de votre choix.Un exemple de la frontière serait:
JQuery UI est interférant avec bootstrap.
Ils ne sont pas vraiment compatibles les uns avec les autres comme ils se chevauchent dans beaucoup de fonctionnalités.
J'ai eu ce problème il y a quelques semaines et trouvé cette page mais je ne voulais pas commencer à ajouter css personnalisé pour quelque chose qui doit "juste travail". Après la suppression de JQuery UI aujourd'hui (pour une autre raison), j'ai remarqué l'outil-conseils commencé à chercher comme prévu. Je sais que c'est une vieille question, mais j'aurais trouvé cette réponse utile il y a quelques semaines.
JS
Et simple
HTML
Voici ce qui a fonctionné pour moi, sur la droite de l'infobulle.
J'ai juste pris un CSS triangle de la même taille que la flèche, puis retirée à partir du Bootstrap triangle par la même distance que la largeur de la bordure. S'adapter selon les besoins, et vous pouvez vous référer à cet article génial de référence sur la façon de faire un triangle pointant dans toutes les directions:
http://css-tricks.com/snippets/css/css-triangle/
Depuis que la meilleure réponse était caché dans les commentaires à la question et n'était pas visible au premier abord, j'ai fini par trouver la solution sur mon propre. C'était plus simple dans mon cas, pour utiliser la liste à la place de l'info-bulle avec déclenchement sur le vol stationnaire de l'événement. Pour ce faire, vous avez 2 options:
Vous pouvez utiliser l'attribut " data-trigger:
ou utiliser l'option "trigger" sur la liste d'initialisation: