'Dynamically setting the style of a Leaflet tooltip

I have a leaflet map in Angular with markers that have a permanent tooltip attached to each of them. I have a form next to the map where the user can select one of two options that changes what is displayed in the tooltip.
How can I change what is in the tooltip without having to redraw all the markers ?
My first idea was to have the tooltip as follows

onEachFeature(feature: any, layer: L.Layer) {
    var tooltip = "<div class='option1'>Option 1</div><div class='option2'>Option 2</div>"
    layer.bindTooltip(tooltip, {
        permanent: true
    })
}

and subscribe to the service that changes the option and do something like that

optionService.option.subscribe(value => {
  // set the CSS to 'display: none' to option1 or option2
})

But I don't know how to change the CSS in that way.

Is my approach the right one, and if so, how can I dynamically change the CSS ? If not, how can I dynamically change what is in the tooltip without having to redraw everything ?

angularleaflet


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions