×
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)
m (Jasfox - corrected link)
jasfox (Talk | contribs)
m (Jasfox - Update links)
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:Code Examples]][[Category:JavaScript]]
+
[[Category:HERE Maps]][[Category:Code Examples]][[Category:JavaScript]]
 
{{Abstract|This article explains how to use CSS styling to create an '''tooltip'''. It is an example of the use of the {{Icode|mouseover}} and {{Icode|mouseout}} events. }}
 
{{Abstract|This article explains how to use CSS styling to create an '''tooltip'''. It is an example of the use of the {{Icode|mouseover}} and {{Icode|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 {{Icode|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.
+
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 {{Icode|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 HERE 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  ==
 
== Coded Example  ==
Line 21: Line 21:
 
</code>
 
</code>
  
The {{Icode|&lt;div&gt;}} element above has been given a unique {{Icode|id}}, and therefore can be styled directly using CSS:
+
The {{Icode|&lt;div&gt;}} element above has been given a unique {{Icode|id}}, and therefore can be styled directly using CSS:
 
<code css>
 
<code css>
 
#nm_tooltip{
 
#nm_tooltip{
Line 37: Line 37:
  
 
=== 2) Add an "onHover" effect by handling mouseover and mouseout events. ===
 
=== 2) Add an "onHover" effect by handling mouseover and mouseout events. ===
We want to display the tooltip {{Icode|&lt;div&gt;}} whenever a map object which has an associated {{Icode|$tooltip}} attribute gains focus. In order to avoid writing multiple event listeners, we will add a listener to the map itself, and check which object has triggered the event within the listener function. Hiding and displaying the tooltip is only the relevant for objects with a  {{Icode|$tooltip}} attribute, and the presence of this can be determined through using a {{Icode|undefined}} check
+
We want to display the tooltip {{Icode|&lt;div&gt;}} whenever a map object which has an associated {{Icode|$tooltip}} attribute gains focus. In order to avoid writing multiple event listeners, we will add a listener to the map itself, and check which object has triggered the event within the listener function. Hiding and displaying the tooltip is only the relevant for objects with a  {{Icode|$tooltip}} attribute, and the presence of this can be determined through using a {{Icode|undefined}} check
 
The tooltip is displayed by setting its {{Icode|style}} to {{Icode|display:block}}.
 
The tooltip is displayed by setting its {{Icode|style}} to {{Icode|display:block}}.
 
<code javascript>
 
<code javascript>
Line 47: Line 47:
 
});
 
});
 
</code>
 
</code>
Similarly the tooltip {{Icode|&lt;div&gt;}}  can be hidden whenever an object with a  {{Icode|$tooltip}} attribute loses focus. Optionally a third listener for {{Icode|click}} events could be added here to hide the tooltip if an {{Icode|InfoBubble}} is displayed for example.
+
Similarly the tooltip {{Icode|&lt;div&gt;}}  can be hidden whenever an object with a  {{Icode|$tooltip}} attribute loses focus. Optionally a third listener for {{Icode|click}} events could be added here to hide the tooltip if an {{Icode|InfoBubble}} is displayed for example.
 
<code javascript>
 
<code javascript>
 
map.addListener("mouseout", function(evt) {
 
map.addListener("mouseout", function(evt) {
Line 81: Line 81:
 
</code>
 
</code>
  
===  4) Define a Marker with a tooltip and add it to the map ===
+
===  4) Define a Marker with a tooltip and add it to the map ===
Having made all the necessary preparations,  a {{Icode|StandardMarker}} can be added in the usual way. The additional {{Icode|$tooltip}} attribute will contain the associated tooltip text.
+
Having made all the necessary preparations,  a {{Icode|StandardMarker}} can be added in the usual way. The additional {{Icode|$tooltip}} attribute will contain the associated tooltip text.
 
<code javascript>
 
<code javascript>
 
var brandenburgerTorMarker = new nokia.maps.map.StandardMarker(
 
var brandenburgerTorMarker = new nokia.maps.map.StandardMarker(
Line 89: Line 89:
 
);
 
);
 
</code>
 
</code>
Because the tooltip text is displayed within an HTML  {{Icode|&lt;div&gt;}} element, it is also able to accept formatted HTML as shown:
+
Because the tooltip text is displayed within an HTML  {{Icode|&lt;div&gt;}} element, it is also able to accept formatted HTML as shown:
 
<code javascript>
 
<code javascript>
var fernsehturmTooltip = '<div>' +
+
var fernsehturmTooltip = '<div>' +
 
'<h2>Tooltip with HTML content</h2>' +
 
'<h2>Tooltip with HTML content</h2>' +
 
'<img width=120 height=90 src=' +
 
'<img width=120 height=90 src=' +
Line 105: Line 105:
 
Obviously the injected HTML can then be further styled as required.
 
Obviously the injected HTML can then be further styled as required.
 
== Summary ==
 
== Summary ==
The result of the [[Media:nm_tooltip.zip|Coded Example]] can be seen below, the cursor is hovering over the marker on the right.
+
A working example which bundles the tooltips into a map component  can be seen below, the cursor is hovering over the marker on the right.
 +
 
 +
http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/demos/tooltip-component/index.html
  
 
[[File:Tooltip.png]]
 
[[File:Tooltip.png]]
  
{{ArticleMetaData
+
 
|sourcecode= [[Media:nm_tooltip.zip|Tooltip Example]]  
+
{{ArticleMetaData <!-- v1.2 -->
 +
|sourcecode= [https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/demos/tooltip-component/libs/tooltip.js libs/tooltip.js]
 +
 
 +
<br/>Example:
 +
*  [http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/demos/tooltip-component/index.html tooltip.html]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= Google Chrome, Firefox, Internet Explorer, Opera
 
|devices= Google Chrome, Firefox, Internet Explorer, Opera
Line 116: Line 122:
 
|platform= Web Browser
 
|platform= Web Browser
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies=Nokia Maps 2.2.3
+
|dependencies= HERE Maps 2.5.3
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= Nokia Maps, JavaScript, Tooltip, CSS
+
|keywords= HERE Maps, JavaScript, Tooltip, CSS
|id= <!-- Article Id (Knowledge base articles only) -->
+
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate=20120301
+
|creationdate= 20120301
|author=[[User:jasfox]]
+
|author= [[User:jasfox]]
 
}}
 
}}
 
{{SeeAlso|
 
{{SeeAlso|
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.net/javascript_api HERE Maps API]
 
*  [http://developer.here.net/apiexplorer/examples/api-for-js/events/event-delegation.html Event Delegation Example]
 
*  [http://developer.here.net/apiexplorer/examples/api-for-js/events/event-delegation.html Event Delegation Example]
 
*  [http://developer.here.net/apiexplorer/examples/api-for-js/information-bubbles/marker-with-information-bubble.html Opening an information bubble on click]
 
*  [http://developer.here.net/apiexplorer/examples/api-for-js/information-bubbles/marker-with-information-bubble.html Opening an information bubble on click]
*  [[Nokia Maps API - How to create a tabbed Infobubble]]
+
*  [[HERE Maps API - How to create a tabbed Infobubble]]
 
}}
 
}}

Latest revision as of 13:33, 28 November 2013

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

[edit] 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 HERE 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.

[edit] Coded Example

In HTML, a tooltip is simply an extra <div> element, which is dynamically styled to appear or disappear as associated markers gain or lose focus.

[edit] 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 tooltip.

var node = document.createElement("div");
node.className = 'nm_bubble_content';
node.id = 'nm_tooltip';
document.getElementById("mapContainer").appendChild(node);

The <div> element above has been given a unique id, and therefore can be styled directly 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 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 <div> element is initially invisible. The other CSS style attributes such as padding and border can be altered as you see fit. It is also possible to style the <div> using its style class.

[edit] 2) Add an "onHover" effect by handling mouseover and mouseout events.

We want to display the tooltip <div> whenever a map object which has an associated $tooltip attribute gains focus. In order to avoid writing multiple event listeners, we will add a listener to the map itself, and check which object has triggered the event within the listener function. Hiding and displaying the tooltip is only the relevant for objects with a $tooltip attribute, and the presence of this can be determined through using a undefined check The tooltip is displayed by setting its style to display:block.

map.addListener("mouseover", function(evt) {
if (( evt.target.$tooltip === undefined) == false){
document.getElementById("nm_tooltip").style.display ='block';
..etc...
}
});

Similarly the tooltip <div> can be hidden whenever an object with a $tooltip attribute loses focus. Optionally a third listener for click events could be added here to hide the tooltip if an InfoBubble is displayed for example.

map.addListener("mouseout", function(evt) {
if (( evt.target.$tooltip === undefined) == false){
document.getElementById("nm_tooltip").style.display ='none';
}
});

If the map is draggable, and the tooltip is displayed whilst doing this, the tooltip will also need to move as the map is moved. This can be achieved by re-firing the marker's mouseover event

map.addListener("drag", function(evt) {	 
if (document.getElementById("nm_tooltip").style.display == 'block'){
map.dispatch( new nokia.maps.dom.Event({type: "mouseover", target: map.getObjectAt(evt.displayX, evt.displayY)}));
}
});

[edit] 3) Add a function to move the tooltip to the correct location and add the relevant text.

Further styling is required on the tooltip <div> to move it around the map. The bounding box of a marker can be obtained using the target.getDisplayBoundingBoxl() method and extracting the x and y coordinates. The x co-ordinate is further offset by half of the width of the <div> so that the centre of the tooltip is aligned with the marker. The text is added by setting the innerHTML attribute. Note that it is inefficient to keep traversing the DOM, so a temporary variable is assigned to the DOM node holding the tooltip <div>, to avoid searching for it more than once.

map.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.getDisplayBoundingBox(map).getCenter().x - (tooltip.offsetWidth/2);
tooltip.style.top = target.getDisplayBoundingBox(map).bottomRight.y + 1;
}
);

[edit] 4) Define a Marker with a tooltip and add it to the map

Having made all the necessary preparations, a StandardMarker can be added in the usual way. The additional $tooltip attribute will contain the associated tooltip text.

var brandenburgerTorMarker = new nokia.maps.map.StandardMarker(
new nokia.maps.geo.Coordinate(52.516237, 13.377686),
{$tooltip : "Brandenburger Tor"}
);

Because the tooltip text is displayed within an HTML <div> element, it is also able to accept formatted HTML as shown:

var fernsehturmTooltip = '<div>' +
'<h2>Tooltip with HTML content</h2>' +
'<img width=120 height=90 src=' +
'"http://upload.wikimedia.org/wikipedia/commons/' +
'8/84/Berlin-fernsehturm.JPG" ' +
'alt=""/><br/><b>Fernsehturm, Berlin</b>' +
'</div>';
var fernsehturmMarker = new nokia.maps.map.StandardMarker(
new nokia.maps.geo.Coordinate(52.520816, 13.409417),
{$tooltip : fernsehturmTooltip}
);

Obviously the injected HTML can then be further styled as required.

[edit] Summary

A working example which bundles the tooltips into a map component can be seen below, the cursor is hovering over the marker on the right.

http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/demos/tooltip-component/index.html

Tooltip.png


Article Metadata
Code Example
Source file: libs/tooltip.js


Example:

Tested with
Devices(s): Google Chrome, Firefox, Internet Explorer, Opera
Compatibility
Platform(s): Web Browser
Dependencies: HERE Maps 2.5.3
Article
Keywords: HERE Maps, JavaScript, Tooltip, CSS
Created: jasfox (01 Mar 2012)
Last edited: jasfox (28 Nov 2013)
This page was last modified on 28 November 2013, at 13:33.
145 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.

×