2017-03-01 1 views
0

Je voulais changer le style par défaut de l'info-bulle du bootstrap, et j'ai été capable de le faire après avoir suivi l'article W3Schools. Cet article ainsi que d'autres SO post suggèrent d'utiliser quelque chose comme ci-dessousPourquoi l'initialisation JavaScript de l'info-bulle de bootstrap est-elle nécessaire pour le style personnalisé?

/* Tooltip on top */ 
    .test + .tooltip.top > .tooltip-arrow { 
     border-top: 5px solid green; 
    } 

qui signifie que je dois ajouter test classe sur l'élément de infobulle. Mais je veux tous les infobulles d'avoir même style donc je décidé de ne pas ajouter test classe

Mon travail JSFiddle is here

Cependant, afin d'obtenir i travail styling personnalisés ont pour initialiser toolips en utilisant javascript

$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 

Si je supprime ce javascript, les infobulles fonctionnent mais ne présentent pas de style personnalisé. Donc, l'info-bulle fonctionne même si je l'initialise en utilisant javascript ou non, cependant le style personnalisé ne fonctionne que s'il est initialisé avec javascript. Pourquoi?

Répondre

0

De Boostrap - Tooltips:

opt-in fonctionnalité

Pour des raisons de performance, les info-bulles et Popover données-APIs sont opt-in, ce qui signifie que vous devez les initialiser vous.

+0

mais l'info-bulle fonctionne toujours même si vous n'optez pas. Si nous ajoutons simplement l'attribut 'title' à un élément html, il affiche une info-bulle sans opt-in – LP13

+0

L'info-bulle est une fonctionnalité par défaut même sans Bootstrap. L'équipe de Bootstrap a préféré opter pour l'utilisation d'une personnalisation dans 'tooltip' en évitant de le faire automatiquement. –