CODEWITHSUNDEEP
javascripttypescriptleafletmapsreact-leaflet
Prabhakaran
Prabhakaran

Reputation: 1337

Change the tail traingle color in the tooltip in Leaflet

I am trying to change the tooltip tail triangle color on mouseover of the Leaflet map marker pin but I can't inspect the exact class name to override it.

Is there a way to change the color and need to move the position of the triangle to left side of the marker image and also the css classname. This post shows the exact requirement for popup and I need for tooltip.

const tooltipOptions = {
        direction: 'top',
        offset: [0, -44],
        // className: 'leaflet-tooltip-tip', -- tried adding the class to change the color but didn't help.
      };
      onMouseOverEvent.bindTooltip('My tooltip', tooltipOptions).openTooltip();

Upvotes: 0

Views: 168

Answers (1)

Prabhakaran
Prabhakaran

Reputation: 1337

Finally found the css class name of tooltip with the help of debugger in the dev tools console with setTimeout(()=> {debugger}, 3000) and then inspected the elements to check the class and modified as below

.leaflet-tooltip-top:before {
    border-top-color: red !important;
}

Upvotes: 0

Related Questions