Skip to content
Switch branches/tags
Go to file

Latest commit

Bumps [acorn]( from 5.7.3 to 5.7.4.
- [Release notes](
- [Commits](acornjs/acorn@5.7.3...5.7.4)

Signed-off-by: dependabot[bot] <>

Git stats


Failed to load latest commit information.


This plugin is designed to avoid tooltip overlapping and make users find out the relationship between each tooltip and marker easily. It is based on Force-Directed Drawing Algorithms in the chapter 12 of the book Handbook of Graph Drawing and Visualization written by Stephen G. Kobourov.

Here is the demo


npm i leaflet-tooltip-layout --save
# or
yarn add leaflet-tooltip-layout

Or you can just copy ./lib/index.js to your project and rename it to what you want.

Getting Started


import * as tooltipLayout from 'leaflet-tooltip-layout';
// or
import { resetMarker, getMarkers, getLine, initialize, getLine } from 'leaflet-tooltip-layout';


const tooltipLayout = require('leaflet-tooltip-layout');


Make sure leaflet is imported before this plugin, and window.L is available

<script type="text/javascript" src="/path/to/leaflet-tooltip-layout.js"></script>

API Reference

  1. L.tooltipLayout.resetMarker(marker)

    Create the marker, bind tooltip to the marker, then use this function.

    Usage example:

    var marker = L.marker(coord, {
      icon: icon
    marker.bindTooltip('Hello world!');
  2. L.tooltipLayout.getMarkers()

    Get the all the markers in this layout.

    Usage example:

    var markerList = getMarkers();
    for (i = 0; i < markerList.length; i++) {
      marker = markerList[i];
      tooltip = marker.getTooltip();
      marker._icon.addEventListener('mouseover', function (){
        // your code
      tooltip._container.addEventListener('mouseover', function (){
        // your code
  3. L.tooltipLayout.getLine(marker)

    Get the line between one marker and its tooltip.

  4. L.tooltipLayout.initialize(map, onPolylineCreated)

    After adding all the markers and tooltips, use this function to create the layout.

    onPolylineCreated is a callback function that allows you to define the style of the line between markers and tooltips, if you want the default one, let this parameter null.

    Or you can define the function like this:

    function onPolylineCreated(ply) {
        color: '#90A4AE'

Build Guide

git clone
cd ./leaflet-tooltip-layout

npm i # install dependencies
npm run build # build lib & example

# or
npm run serve # enter dev zone


MIT License