Tooltip-Stil für Broschüren überschreiben?

Ich möchte den Standardstil der QuickInfos zu Leaflet 1.0.0 überschreiben, insbesondere die Blase / den Rahmen. Ich sehe keine Optionen oder Methoden dafür. Wie binde ich mich in das CSS ein? Ich möchte Ebenen einzeln ändern, daher muss ich die QuickInfos jeder Ebene einzeln mit CSS auswählen.

leaflet css

— Tom Chadwin
quelle

Die L.TooltipKlasse enthält eine classNameOption (von der DivOverlayKlasse geerbt ), die in eine CSS-Klasse konvertiert wird, wenn der Tooltip angezeigt wird. z.B:

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

Dann geht es nur noch darum, diese CSS-Klasse zu definieren. Der Tipp ist etwas knifflig, da mit Pseudoelementen und Leaflet-CSS-Klassen gearbeitet werden muss:

.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;
}

Sehen Sie hier ein Arbeitsbeispiel .

— IvanSanchez
quelle

OK, ich werde für jede Ebene eine vollständige Klasse schreiben und über diese Option anhängen. Vielen Dank!

— Tom Chadwin

Ist es jedoch möglich, das CSS für die Beschriftungen aller Ebenen "zurückzusetzen" , dh den Rand / die Farbe zu entfernen? Die einzelnen Stile, die ich über den Klassennamen anhänge, können dann nur die erforderlichen zusätzlichen Deklarationen enthalten.

— Tom Chadwin

Habe gerade deine aktualisierte Antwort gesehen. Ich werde versuchen .leaflet-tooltip, und seine -leftund -rightKlassen, mit den Pseudo-Elementen, und sehen, wo ich komme, danke!

— Tom Chadwin

Ja, Sie können die für .leaflet-tooltip(und -leftund -right) geltenden CSS-Regeln überprüfen und überschreiben . Stellen Sie einfach sicher, dass Sie dies nach dem Laden des Leaflet CSS tun .

— IvanSanchez

Bearbeiten Sie die ::beforeKlasse, um das kleine nach rechts oder links zeigende Dreieck zu ändern . Bsp.: Um es ganz zu verbergen: .leaflet-tooltip-left.myCSSClass::before {border-left-color: transparent;}(Ich habe lange

— gebraucht