リーフレットCircleMarkerのツールチップのスタイルを変更

Question

私はWebアプリケーションにReactJS内のリーフレットを使用しています。

CircleMarkerオブジェクトのツールチップを追加する必要がありますが、サイズが小さすぎるため、幅、高さなどを変更する必要があります。

私は他のソースから入手したので、新しいCSSクラスを定義して、ツールチップ内のclassname小道具に渡す必要があります。これを処理する他の方法はありますか？

ここに私のコードです。

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

Answer 1

あなたはこのCSSを追加することができます。

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

そして、ライブでのあなたの欲求の大きさを持っている要素を点検してください。

カスタムCSSクラスを使用したい場合は、あなたのツールチップにオプションのようにそれを追加することができます。

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);