Add A Tooltip

A newer version of Maps for web SDK is available

A newer version of the SDK is available and is recommended for all users. Learn about the latest version, V2.0, in the Maps for web v2.0 documentation

NextBillion.ai Maps allow you attach a tooltip to a marker. Checkout the Tooltip API to learn more.

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta name="viewport" content="initial-scale=1.0" />
5
    <meta charset="UTF-8" />
6
    <title>Add a tooltip</title>
7
    <link href="https://maps-gl.nextbillion.io/maps/api/css" rel="stylesheet" />
8
    <!-- Or use the legacy version: -->
9
    <!-- <link href="https://maps.nextbillion.io/maps/api/css" rel="stylesheet"> -->
10
    <style>
11
      * {
12
        margin: 0;
13
        padding: 0;
14
      }
15
      #map {
16
        width: 100vw;
17
        height: 100vh;
18
      }
19
    </style>
20
  </head>
21
  <body>
22
    <div id="map"></div>
23
    <script src="https://maps-gl.nextbillion.io/maps/api/js"></script>
24
    <!-- Or use the legacy version: -->
25
    <!-- <script src="https://maps.nextbillion.io/maps/api/js"></script> -->
26
    <script>
27
      ;(function () {
28
        var loc = { lat: 28.6139, lng: 77.209 }
29
        nextbillion.apiKey = 'your-api-key'
30
        var map = new nextbillion.maps.Map(document.getElementById('map'), {
31
          zoom: 11,
32
          center: loc,
33
        })
34
        var marker = new nextbillion.maps.Marker({
35
          position: loc,
36
          map: map,
37
        })
38
        var tooltip = new nextbillion.maps.Tooltip({
39
          marker: marker,
40
          content: 'This is a tooltip that shows when hovering on the marker',
41
        })
42
      })()
43
    </script>
44
  </body>
45
</html>