Skip to content
BillyGalbreath edited this page Apr 18, 2024 · 6 revisions
Example json is at the bottom of the page

The tooltip is used to display small texts on top of map layers.


Tooltip Options

key type default description
"content" string "" Sets the HTML contents of the tooltip
"offset" Point [0, 0] The offset of the tooltip position
"direction" string auto Direction where to open the tooltip. Possible values are: right, left, top, bottom, center, auto. auto will dynamically switch between right and left according to the tooltip position on the map
"permanent" boolean false Whether to open the tooltip permanently or only on mouseover
"sticky" boolean false If true, the tooltip will follow the mouse instead of being fixed at the feature center
"opacity" number 0.9 Tooltip container opacity
"className" string "" A custom CSS class name to assign to the tooltip
"bubblingMouseEvents" boolean true When true, a mouse event on this tooltip will trigger the same event on the map
"interactive" boolean false If true, the tooltip will listen to the mouse events
"pane" string "tooltipPane" Map pane where the tooltip will be added
"attribution" string null String to be shown in the attribution control

Tooltip Example

Sample green circle at world center with radius of 20 blocks.

{
  "id": "example_tooltip_layer",
  "label": "Example Tooltip",
  "markers": [
    {
      "type": "circle",
      "id": "unique_id_001",
      "point": [512000, 512000],
      "options": {
        "radius": 20,
        "color": "#00FF00"
      },
      "tooltip": {
        "content": "This is a green circle",
        "direction": "top",
        "offset": [0, -20]
      }
    }
  ]
}