Substituir o estilo da dica de ferramenta do Folheto?


10

Gostaria de substituir o estilo padrão das dicas de ferramentas do Leaflet 1.0.0, especialmente a bolha / quadro. Não vejo opções ou métodos para isso. Como eu me conecto ao CSS? Quero alterar as camadas individualmente, por isso preciso selecionar as dicas de cada camada individualmente com CSS.

Respostas:


16

A L.Tooltipclasse inclui uma classNameopção (herdada da DivOverlayclasse), que será convertida em uma classe CSS quando a dica de ferramenta for exibida. por exemplo:

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

Então, é apenas uma questão de definir essa classe CSS. A dica é um pouco complicada, pois precisa trabalhar com pseudoelementos e classes CSS de folheto:

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

Veja um exemplo de trabalho aqui .


OK, vou escrever uma classe completa para cada camada e anexar através dessa opção. Obrigado!
214136 Tom Chadwin #

1
É possível, no entanto, "redefinir" o CSS para todos os rótulos de camadas, ou seja, remover a borda / bgcolor? Os estilos individuais que eu anexo via nome da classe poderiam ter apenas as declarações extras necessárias.
precisa saber é o seguinte

Acabei de ver sua resposta atualizada. Vou tentar .leaflet-tooltip, e suas -lefte -rightclasses, com os pseudo-elementos, e ver onde chego, Obrigado!
precisa saber é o seguinte

1
Sim, você é livre para inspecionar e substituir as regras CSS que se aplicam a .leaflet-tooltip(e -lefte -right). Apenas faça isso depois de carregar o CSS do Leaflet.
precisa saber é o seguinte

Para modificar o pequeno triângulo apontador direito ou esquerdo, edite a ::beforeclasse. Ex: para escondê-lo completamente: .leaflet-tooltip-left.myCSSClass::before {border-left-color: transparent;}(Levei muito tempo para descobrir isso)
Matt Wilkie
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.