I am migrating from Google map API to leaflet and stuck with this issue. I have some moving marker (showing aircraft positions). I need to display each aircraft speed, heading etc. along with aircraft marker. I am having two issues. a. Tooltip or popup does not display a transparent background b. With obscure background, when marker moves to new locations, labels leave a trail of previous labels.
I tried playing with CSS as follows but had no success.
var contentString =
"<style type='text/css'>" +
"div {background: rgb(0, 151, 19); padding: 10px; text-align:justify; }" +
"div.first2 { background: rgba(0, 151, 19, 0.0); marginLeft: -10; marginRight: 0; }" +
"</style>" +
"<div class='first2'><p>data</p></div>";
track.bindTooltip(contentString, {direction: 'right', permanent: true, className: 'first2'}).openTooltip();
But to no avail. Any help will be much appreciated.