Google Maps API Tutorial - Tooltips

Custom Tooltips - new method

The advantages are that the tooltip contents don't get squashed when near the East edge of the viewport, and the positioning behaviour is correct when the viewport contains one copy of the International Date Line.

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.

When the mouseover event occurs, the pixel position of the marker relative to the North West corner of the map dragObject 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 more than one copy of the International Date Line is within the visible map. I don't know why that happens, but the behaviour is better than the previous custom tooltips.
2. The tooltip contents wrap differently in IE.

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.