Modifier le style de l'info-bulle de Leaflet CircleMarker

Question

J'utilise Leaflet dans ReactJS pour mon application Web.

J'ai besoin d'ajouter une info-bulle pour mon objet CircleMarker, mais sa taille est trop petite, donc j'ai besoin de changer sa largeur, heightv, etc.

Comme je l'ai obtenu à partir d'autres sources, j'ai besoin de définir une nouvelle classe CSS et le donner à l'accessoire classname dans l'info-bulle. Y a-t-il un autre moyen de gérer cela?

Voici mon code.

var marker = L.circleMarker(coordinate, {color: colorCodes[i], fillColor: colorCodes[i], fill: colorCodes[i],fillOpacity: 1.0}); 
marker.bindTooltip(Point.Name.toString()); 

Answer 1

Vous pouvez ajouter ce CSS:

.leaflet-tooltip { 
    padding: 0px 4px 0px 4px !important; 
} 

Ensuite, utilisez élément inspectez pour avoir la taille de votre désir en direct.

Si vous souhaitez utiliser une classe CSS personnalisée, vous pouvez l'ajouter comme une option à votre info-bulle:

var tooltip = L.tooltip({ 
    className: "temporaire" 
}).setContent(Point.Name.toString()); 

var marker = L.circleMarker(coordinate,{ 
    color: colorCodes[i], 
    fillColor: colorCodes[i], 
    fill: colorCodes[i], 
    fillOpacity: 1.0 
    }).bindTooltip(tooltip);