¿Anular el estilo de información sobre herramientas de folleto?

10

Me gustaría anular el estilo predeterminado de la información sobre herramientas de Leaflet 1.0.0, especialmente la burbuja / marco. No veo ninguna opción o método para esto. ¿Cómo me engancho al CSS? Quiero cambiar las capas individualmente, así que necesito seleccionar la información sobre herramientas de cada capa individualmente con CSS.

leaflet css Tom Chadwin
fuente

Respuestas:

16

La L.Tooltipclase incluye una classNameopción (heredada de la DivOverlayclase), que se convertirá en una clase CSS cuando se muestre la información sobre herramientas. p.ej:

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

Entonces, solo es cuestión de definir esa clase CSS. La sugerencia es un poco complicada, ya que necesita trabajar con pseudoelementos y clases CSS de folleto:

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

Vea un ejemplo de trabajo aquí .

IvanSanchez
fuente
OK, escribiré una clase completa para cada capa y la adjuntaré a través de esa opción. ¡Gracias!
Tom Chadwin
1
¿Es posible, sin embargo, "restablecer" el CSS para todas las etiquetas de las capas, es decir, eliminar el borde / bgcolor? Los estilos individuales que adjunto a través de classname solo podrían tener las declaraciones adicionales requeridas.
Tom Chadwin
Acabo de ver tu respuesta actualizada. Voy a tratar .leaflet-tooltip, y sus -lefty -rightclases, con los pseudo-elementos, y ver donde consigo, gracias!
Tom Chadwin
1
Sí, puede inspeccionar y sobrescribir las reglas CSS que se aplican a .leaflet-tooltip( -leftyy -right). Solo asegúrese de hacerlo después de cargar el CSS del folleto.
IvanSanchez
Para modificar el pequeño triángulo señalador derecho o izquierdo edite la ::beforeclase. Por ejemplo: para ocultarlo por completo: .leaflet-tooltip-left.myCSSClass::before {border-left-color: transparent;}(Me tomó mucho tiempo descubrirlo)
Matt Wilkie