Remplacer le style d'infobulle du dépliant?

10

Je voudrais remplacer le style par défaut des info-bulles de Leaflet 1.0.0, en particulier la bulle / le cadre. Je ne vois aucune option ou méthode pour cela. Comment puis-je me connecter au CSS? Je souhaite modifier les calques individuellement, je dois donc sélectionner individuellement les info-bulles de chaque calque avec CSS.

leaflet css Tom Chadwin
la source

Réponses:

16

La L.Tooltipclasse comprend une classNameoption (héritée de la DivOverlayclasse), qui sera convertie en classe CSS lorsque l'info-bulle sera affichée. par exemple:

L.marker(latlng).addTo(map).bindTooltip('Text', {className: 'myCSSClass'});

Ensuite, il s'agit simplement de définir cette classe CSS. L'astuce est un peu délicate, car elle nécessite de travailler avec des pseudo-éléments et des classes CSS de dépliants:

.myCSSClass {
  background: green;
  border: 2px solid cyan
}
.leaflet-tooltip-left.myCSSClass::before {
  border-left-color: cyan;
}
.leaflet-tooltip-right.myCSSClass::before {
  border-right-color: cyan;
}

Voir un exemple de travail ici .

IvanSanchez
la source
OK, je vais écrire une classe complète pour chaque couche et attacher via cette option. Merci!
Tom Chadwin
1
Est-il possible, cependant, de "réinitialiser" le CSS pour toutes les étiquettes des couches, c'est-à-dire de supprimer la bordure / bgcolor? Les styles individuels que j'attache via classname ne peuvent alors avoir que les déclarations supplémentaires requises.
Tom Chadwin
Je viens de voir votre réponse mise à jour. Je vais essayer .leaflet-tooltip, et ses -leftet -rightclasses, avec les pseudo-éléments, et voir où je reçois, Merci!
Tom Chadwin
1
Oui, vous êtes libre d'inspecter et d'écraser les règles CSS qui s'appliquent à .leaflet-tooltip(et -leftet -right). Assurez-vous de le faire après avoir chargé le CSS de Leaflet.
IvanSanchez
Pour modifier le petit triangle pointant à droite ou à gauche, modifiez la ::beforeclasse. Ex: pour le cacher complètement: .leaflet-tooltip-left.myCSSClass::before {border-left-color: transparent;}(Cela m'a pris beaucoup de temps pour comprendre cela)
Matt Wilkie