Google Maps API Tutorial - Tooltips

© 2006, 2007, 2009 Mike Williams

 
Translate this page:

 

Custom Tooltips

It's possible to add custom tooltips to your markers.

This technique was invented by "evilc".

Here's an example

The code is more complicated than using standard tooltips, but by creating our own tooltips we can:

  • Pop up the tooltip instantly when the mouse moves over the marker, instead of there being a delay.
  • Keep the tooltip visible until the mouse moves off the marker.
  • Pop up the marker tooltip when the mouse moves over the corresponding sidebar entry.
  • Use our own styles.
The technique involves creating a <div> that contains the tooltip which is initially hidden.

When the mouseover event occurs, the pixel position of the marker relative to the South West corner of the visible map is calculated, the tooltip <div> is positioned relative to that corner and made visible.

There's no reason why the tooltip should only contain a simple text label. You can use images and tables etc. Don't try using links or forms, because the tooltip disappears when the mouse moves over the tooltip, because it would no longer be over the marker.

Bugs

  1. The tooltip appears in the wrong place when the International Date Line is within the visible map. This is caused by a problem with map.getBounds(). It returns the normalized values of the locations, but we really need the unnormalized values. I don't believe that there's anything that can be done about that until Google provide a mechanism for obtaining the unnormalized location of the map corners.
  2. The tooltip gets squashed up if it is created close to the East edge of the map. The behaviour is worse in Firefox than IE, particularly if overflow:hidden is not used. The behaviour at the other edges is OK.

Potential Pitfalls

  1. Make sure that you create the map before performing the appendChild(tooltip). If you append the tooltip div first, then the tooltip gets displayed underneath the map tiles and you can't see it.
  2. Don't put links or forms into the tooltip div. The user won't be able to click on them because the tooltip disappears when the mouse moves off the marker.
  3. Do make sure that the tooltip has a defined CSS style, which should at least include a "background-color" setting. Without it, the tooltip background would be invisible.
Back to Mike's Homepage
Up to the start of this tutorial