HERE Maps API - How to create a Tooltip
This article explains how to use CSS styling to create an tooltip. It is an example of the use of the mouseover and mouseout events.
Contents |
Introduction
A tooltip is a GUI element that appears when the cursor hovers over an associated point of interest. It usually contains some text with more information about the item concerned, typically a short descriptive label. This leaves the screen uncluttered by hiding these summaries unless the point of interest has focus. It is impossible to click on a tooltip, since the tooltip will disappear as soon as its associated point of interest loses focus. A more common clickable alternative to the tooltip is the InfoBubble, which is part of the standard API. Since tooltips are only used on a subset of mapping applications, they do not come as standard as part of the Nokia Maps API, if tooltip functionality is required in an application, it is a simple matter to add tooltips to map markers with a few lines of code.
Coded Example
A tool tip is simply an extra <div> element, which is dynamically styled as markers gain or lose focus.
1) Inject an extra DIV into the DOM
Assume the web page holds a map in the following <div> element
<div id="mapContainer"></div>
After setting up the map in the usual manner, we need to inject an additional <div> into the DOM, this will eventually hold the text of the tool tip.
document.getElementById("mapContainer").lastChild.insertAdjacentHTML("beforeEnd", "<div id='nm_tooltip' />");
The <div> element above has been given a unique id, and therefore can be styled directlly using CSS:
#nm_tooltip{
position: absolute;
color:blue;
background:white;
border: 1px solid black;
padding-left: 1em;
padding-right: 1em;
display: none;
min-width: 120px;
}
The three important CSS attributes here are background, color and display. A fixed backgroundcolour needs to be set so that the tooltip itself is displayed over the map, color will need to contrast with the background of course. The display must initially be set to none so that the tooltip <div> element is initially invisible. The other CSS style attributes such as padding and border can be altered as you see fit.
2) Add an" onHover" effect by handling mouseover and mouseout.
var markersContainer = new nokia.maps.map.Container();
markersContainer.addListener("mouseover", function(evt) {
if (( evt.target.$tooltip === 'undefined') == false){
... etc...
document.getElementById("nm_tooltip").style.display ='block';
}
});
markersContainer.addListener("mouseout", function(evt) {
if (( evt.target.$tooltip === 'undefined') == false){
document.getElementById("nm_tooltip").style.display ='none';
}
});
map.objects.add(markersContainer);
3) Add a function to move and display the DIV with appropriate innerHTML
var markersContainer = new nokia.maps.map.Container();
markersContainer.addListener("mouseover", function(evt) {
if (( evt.target.$tooltip === 'undefined') == false){
var tooltip = document.getElementById("nm_tooltip");
var target = evt.target;
tooltip.innerHTML = target.$tooltip;
tooltip.style.display ='block';
tooltip.style.left = target.getDisplays()[0].geoToPixel(target.coordinate).x - (tooltip.offsetWidth/2);
tooltip.style.top = target.getDisplays()[0].geoToPixel(target.coordinate).y;
}
});
4) Define Markers with a tooltip and add them to the Container
var marker = new nokia.maps.map.StandardMarker(
new nokia.maps.geo.Coordinate(52.520816, 13.409417),
{$tooltip : fernsehturm}
);
markersContainer.objects.add(marker)
Summary
Add categories below. Remove Category:Draft when the page is complete or near complete
Article Metadata
Code Example
Tested with
Compatibility
Article
