CODEWITHSUNDEEP
pythoncssleafletplotly-dash
Tunneller
Tunneller

Reputation: 589

How can I use CSS className to remove the bubble surrounding dash leaflet in python

I want to superimpose a city to dash leaflet map. I can get by close using a dedicated class

dl.Map(id="map-id", style={'width': '1000px', 'height': '500px'},
   center= [29.66, -97.65] , zoom=4, children=[
        dl.CircleMarker(center=[29.666 , -97.6513], radius=3,color="red", 
                 fill=True,fillColor="red",fillOpacity=1,
                       children=[   dl.Tooltip("Ziedler Dam", permanent=True,
                                      className='my-perm-class')  ]),
        ])

where I define a CSS file as follows

.my-perm-class {
}
.leaflet-popup-tip-container.my-perm-class {
    display: none;
}
.leaflet-tooltip.my-perm-class {
padding: 0px;
box-shadow: none;
background-color: transparent;
border-left-color:transparent;
border-right-color:transparent;
border: none
}

and then I'm stuck.... A small triangle remains!! In Chrome I can see that if I disable

.leaflet-tooltip-top:before, .leaflet-tooltip-bottom:before, .leaflet-tooltip-left:before, .leaflet-tooltip-right:before {
border: 6px solid transparent;
}

then that would work, but the syntax of namespaces and that colon on "before" is confusing me. Is this written up anywhere?

Thanks,

Upvotes: 1

Views: 367

Answers (1)

emher
emher

Reputation: 6024

The :before syntax creates a pseudo-element as the first child of the selected element. To remove the triangle, simple add the following line to you .css file,

.leaflet-tooltip-left.my-perm-class:before {
    border: none
}

Upvotes: 1

Related Questions