Mengganti style tooltip Leaflet?

10

Saya ingin mengganti gaya default toollet Leaflet 1.0.0, terutama gelembung / bingkai. Saya tidak melihat opsi atau metode untuk ini. Bagaimana cara saya terhubung ke CSS? Saya ingin mengubah layer secara individual, jadi saya perlu memilih tooltips setiap layer secara individual dengan CSS.

leaflet css Tom Chadwin
sumber

Jawaban:

16

The L.Tooltipkelas termasuk classNamepilihan (yang diwarisi dari DivOverlaykelas), yang akan diubah menjadi kelas CSS ketika tooltip ditampilkan. misalnya:

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

Kemudian, itu hanya masalah mendefinisikan kelas CSS itu. Tip ini agak rumit, karena perlu bekerja dengan pseudo-elements dan leaflet CSS class:

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

Lihat contoh yang berfungsi di sini .

Ivan Sanchez
sumber
OK, saya akan menulis kelas penuh untuk setiap layer dan melampirkan melalui opsi itu. Terima kasih!
Tom Chadwin
1
Apakah mungkin, untuk "mengatur ulang" CSS untuk label semua lapisan, yaitu untuk menghapus border / bgcolor? Gaya individu yang saya lampirkan melalui classname kemudian hanya dapat memiliki deklarasi tambahan yang diperlukan.
Tom Chadwin
Baru saja melihat jawaban Anda yang diperbarui. Saya akan mencoba .leaflet-tooltip, dan ini -leftdan -rightkelas, dengan elemen semu, dan melihat di mana saya dapatkan, Terima kasih!
Tom Chadwin
1
Ya, Anda bebas untuk memeriksa dan menimpa aturan CSS yang berlaku untuk .leaflet-tooltip(dan -leftdan -right). Pastikan Anda melakukannya setelah memuat Leaflet CSS.
Ivan Sanchez
Untuk memodifikasi sedikit segitiga menunjuk kanan atau kiri mengedit ::beforekelas. Ex: untuk menyembunyikannya sama sekali: .leaflet-tooltip-left.myCSSClass::before {border-left-color: transparent;}(Butuh waktu lama untuk mencari tahu)
matt wilkie