×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to create a Tooltip

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
(Jasfox -)
jasfox (Talk | contribs)
m (Jasfox - Introduction and DIV injection added.)
Line 2: Line 2:
 
{{UnderConstruction|timestamp=20120301150325 }}
 
{{UnderConstruction|timestamp=20120301150325 }}
  
{{Abstract|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. }}
+
{{Abstract|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 ==
 
== 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
 +
<code javascript>
 +
<div id="mapContainer"></div>
 +
</code>
 +
After setting up the map in the usual manner, we need to inject and additional ''&lt;div&gt;'' into the DOM, this will eventually hold the text of the tool tip.
 +
<code javascript>
 +
document.getElementById("mapContainer").lastChild.insertAdjacentHTML("beforeEnd", "<div id='nm_tooltip' />");
 +
</code>
  
 +
The ''&lt;div&gt;'' element above has been given a unique ''id'', and therefore can be styled directlly  using CSS:
 +
<code css>
 +
#nm_tooltip{
 +
      position: absolute;
 +
      color:blue;
 +
      background:white;
 +
      border: 1px solid black;
 +
      padding-left: 1em;
 +
      padding-right: 1em;
 +
      display: none;
 +
      min-width: 120px;      
 +
}
 +
</code>
 +
The three important CSS attributes here are  ''background'', ''color'' and  ''display''.  A fixed ''background''colour 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  ''&lt;div&gt;'' 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.===
 +
 +
 +
<code javascript>
 +
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);
 +
</code>
 +
 +
 +
=== Add a function to move and display the DIV with appropriate  innerHTML ===
 +
 +
<code javascript>
 +
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);
 +
</code>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
<code javascript>
 +
var marker = new nokia.maps.map.StandardMarker(
 +
new nokia.maps.geo.Coordinate(52.520816, 13.409417),
 +
{$tooltip : fernsehturm}
 +
);
 +
markersContainer.objects.add(marker)
 +
</code>
  
 
== Summary ==
 
== Summary ==

Revision as of 19:48, 1 March 2012

Underconstruction.pngUnder 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.

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 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


Article Metadata
Code ExampleTested with
Devices(s): Google Chrome 16.0.912, Firefox 10.0.2, Internet Explorer 8
Compatibility
Platform(s): Web Browser
Dependencies: Nokia Maps 2.1.1
Article
Keywords: Nokia Maps, JavaScript, Tooltip, CSS
Created: jasfox (01 Mar 2012)
Last edited: jasfox (01 Mar 2012)
146 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×