Tooltips
The tooltip is a common graphical user interface element. The user hovers the pointer/mouse cursor over a marker/geometry, without clicking it, and the tooltip may appear.
Marker tooltip
First of all, you should create a marker on the map. Follow instructions from the marker article.
Markers can emit events. So, you can add mouseover and mouseout event handlers to your marker:
// Will be triggered, when the cursor will be over the marker
marker.on('mouseover', (e) => {
console.log('mouseover');
});
// Will be triggered, when the cursor will be out of the marker
marker.on('mouseout', (e) => {
console.log('mouseout');
});
The main idea is to show a tooltip on mouseover and hide it on mouseout. Every event handler's callback accepts a single parameter — event, describing the event which has occurred with info like screen points (x, y) and coordinates (lng, lat) of the event.
Tooltip can be any HTML element with any CSS you want. You can create it dynamically or add into the document manually. In the example below we describe the simplest version of the tooltip:
<style>
#tooltip {
padding: 20px 40px;
background: #fff;
display: none;
position: fixed;
pointer-events: none;
}
</style>
<div id="tooltip">Hello, world!</div>
Tooltip should be hidden by default and positioned absolutely or fixed. Such positioning is required to show a tooltip over the map.
Now you can upgrade mouseover and mouseout event handlers. On mouseover you can show the tooltip at the point, which can be taken from event parameter. On mouseout you can set display to none to hide the tooltip. Also, you need to set pointer-events to none, cause your tooltip will appear exactly under the mouse cursor and mouseout will be triggered.
Another approach is to add a small offset to top and left in CSS to shift from the event point. You can use both of them for the best view.
const tooltipEl = document.getElementById('tooltip');
marker.on('mouseover', (event) => {
// Offset in pixels
const offset = 5;
tooltipEl.style.top = `${event.point[1] + offset}px`;
tooltipEl.style.left = `${event.point[0] + offset}px`;
tooltipEl.style.display = 'block';
});
marker.on('mouseout', (e) => {
tooltipEl.style.display = 'none';
});
Your tooltip will be shown up while mouse cursor is over the marker.
This is the simplest example of the tooltip. You can add some logic for more clever positioning near screen borders, more CSS, etc.
So, you can show any HTML above the map with such approach.
Full example of creating a tooltip for a marker. Put your mouse cursor over the marker to see the tooltip.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="Example of a tooltip for a marker" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#tooltip {
padding: 20px 40px;
background: #fff;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
display: none;
position: fixed;
pointer-events: none;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="tooltip">Hello, world!</div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
const marker = new mapgl.Marker(map, {
coordinates: [55.31878, 25.23584],
icon: 'https://docs.2gis.com/img/mapgl/marker.svg',
});
const tooltipEl = document.getElementById('tooltip');
marker.on('mouseover', (event) => {
// Offset in pixels
const offset = 5;
tooltipEl.style.top = `${event.point[1] + offset}px`;
tooltipEl.style.left = `${event.point[0] + offset}px`;
tooltipEl.style.display = 'block';
});
marker.on('mouseout', (e) => {
tooltipEl.style.display = 'none';
});
</script>
</body>
</html>
Geometry tooltip
You can add a tooltip to any type of geometries. The approach the same as with markers: show tooltip on mouseover and hide it on mouseout.
Full example of creating a tooltip for a polyline. Put your mouse cursor over the polyline to see the tooltip.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>2GIS Map API</title>
<meta name="description" content="Example of a tooltip for a polyline" />
<style>
html,
body,
#container {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#tooltip {
padding: 20px 40px;
background: #fff;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 4px;
display: none;
position: fixed;
pointer-events: none;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="tooltip">Hello, world!</div>
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<script>
const map = new mapgl.Map('container', {
center: [55.31878, 25.23584],
zoom: 13,
key: 'Your API access key',
});
const polyline = new mapgl.Polyline(map, {
coordinates: [
[55.28770929, 25.22069944],
[55.28976922, 25.25656786],
[55.33096795, 25.22007825],
[55.33302789, 25.25687836],
],
width: 10,
color: '#00b7ff',
});
const tooltipEl = document.getElementById('tooltip');
polyline.on('mouseover', (event) => {
// Offset in pixels
const offset = 5;
tooltipEl.style.top = `${event.point[1] + offset}px`;
tooltipEl.style.left = `${event.point[0] + offset}px`;
tooltipEl.style.display = 'block';
});
polyline.on('mouseout', (e) => {
tooltipEl.style.display = 'none';
});
</script>
</body>
</html>