javascript - How to customize leaflet labels? and when I change the opacity, it changes opacity of the fonts as well

Question

let myIcon = L.icon({
iconUrl: 'images/Province_Center.png',
iconSize: [9.2, 9],
});

L.marker([34.537205, 69.191150],{icon:myIcon}).bindTooltip("Kabul",{permanent: true, direction: 
'right'}).addTo(map),
L.marker([34.349708, 62.203600],{icon:myIcon}).bindTooltip("Herat",{permanent: true, direction: 
'right'}).addTo(map),
L.marker([34.427256, 70.457220],{icon:myIcon}).bindTooltip("Nangarhar",{permanent: true, direction: 
'right'}).addTo(map),
L.marker([36.708842, 67.110785],{icon:myIcon}).bindTooltip("Balk",{permanent: true, direction: 
'right'}).addTo(map),

I want to change the font color, background color and the label position.

question from:https://stackoverflow.com/questions/65850953/how-to-customize-leaflet-labels-and-when-i-change-the-opacity-it-changes-opaci

Answer 1

You can add html to the tooltip instead of plain text:

L.marker([34.537205, 69.191150]).bindTooltip("<span style='font-size: 40px'>Kabul</span>",{permanent: true, direction: 'right'}).addTo(map);

Also you can add your own css style to the tooltip:

.leaflet-tooltip {
    background-color: #f00;
}