LeafletのTooltip（ツールチップ）の使い方についてまとめました。
Tooltipの作成
L.tooltip(<Tooltip options> options?, <Layer> source?)
Tooltipオプションと、Layerを指定してTooltipオブジェクトをインスタンス化します。
sample code（MarkerにTooltipを設定）
|
1 |
marker.bindTooltip("ツールチップの内容").openTooltip(); |
Options
Tooltipのオプション
| option | default value | 説明 |
|---|---|---|
| pane | ‘tooltipPane’ | Tooltipを追加するMap paneを指定します。 |
| offset | Point(0, 0) | Tooltipのオフセットを指定します。 オフセットを指定することで、Tooltipの表示位置を変えることができます。 |
| direction | ‘auto’ | Tooltipの開く方向を指定します。 指定可能な値は、 right、left、top、bottom、center、autoの６つです。 autoの場合、表示する位置に応じて左右に動的に切り替わります。 |
| permanent | false | Tooltipを常に表示するか（true）、マウスオーバーの場合のみ表示するか（false）を指定します。 |
| sticky | false | trueの場合、マウスカーソルからTooltipが表示されます。（マウスカーソルが移動するとTooltipも移動します） |
| opacity | 0.9 | Tooltipの不透明度を指定します。 |
offset、direction、permanent、sticky、opacity オプションの、sample code と demoは以下になります。
offset
|
1 2 |
var marker = L.marker([35.7102, 139.8132]).addTo(map); marker.bindTooltip('ツールチップの内容',{offset:L.point(30, 50)}); |
direction
|
1 2 |
var marker = L.marker([35.7102, 139.8132]).addTo(map); marker.bindTooltip('ツールチップの内容',{direction:'right'}); |
permanent
|
1 2 |
var marker = L.marker([35.7102, 139.8132]).addTo(map); marker.bindTooltip('ツールチップの内容',{permanent:true}); |
sticky
|
1 2 |
var marker = L.marker([35.7102, 139.8132]).addTo(map); marker.bindTooltip('ツールチップの内容',{sticky:true}); |
opacity
|
1 2 |
var marker = L.marker([35.7102, 139.8132]).addTo(map); marker.bindTooltip('ツールチップの内容',{opacity:0.5}); |