Revision as of 19:48, 1 March 2012

Under Construction: (20120301150325) This article is under construction and it may have outstanding issues. If you have any comments please use the comments tab.

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.

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 hidden 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 and 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.

Add an on hover 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...
  }
 
});
markersContainer.addListener("mouseout", function(evt) {
		if (( evt.target.$tooltip === 'undefined') == false){
...etc...
		}
});
map.objects.add(markersContainer);

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;
 
  }
 
});
markersContainer.addListener("mouseout", function(evt) {
		if (( evt.target.$tooltip === 'undefined') == false){
				document.getElementById("nm_tooltip").style.display ='none';
		}
});
map.objects.add(markersContainer);

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