Mouseover Tooltip jquery (tipsy)

I tried开发者_C百科 executing a Jquery tooltip code on marker hover, however I think that the problem lies in setting the position.

Here's my code

        google.maps.event.addListener(marker, "mouseover", function () {
    $('#example-1').tipsy();
        });

The MOUSEOVER code itself works, but I think that I might need to set the position of the tooltip?

The plugin can be found here: http://onehackoranother.com/projects/jquery/tipsy/

The problem here is the element needs to be on the map.

For an illustration of how to do this look at the Custom Info Window Example, Google for:

Google Maps Javascript API v3 Example Info Window Custom

Maybe someone still need a solution. This is how I solve it.

First, define a listener, for hover event on "areas" in your map layer

$(dom).on('hover', 'area', function () {
    var $this = $(this), title = $this.attr('title');
    if (title) {
        $this.removeAttr('title');

        // this is the best dom node I figured out to attach the tipsy (and trigger this very first time)
        $this.parent().parent().attr('title', title).tipsy().tipsy("show");
    }
});

When you add your maker, do it without optimization:

new google.maps.Marker({
    map: map,
    title: title,
    position: location,
    // make maps to create a DOM node for each marker
    optimized: false
});

Thats all!

Rather than importing an extra library to get tooltips for the map, you might have better luck just using the InfoWindow object that is part of the Google Maps JavaScript API v3.

Another, even easier (but less feature-rich) option is to use the default tooltip functionality for Marker objects. Simply set the title property on your Marker and your done.

marker.setTitle('rollover text!!!');

(If you truly need some functionality in tipsy that isn't available using InfoWindow, it would probably be good to include what that functionality is in the question and/or a comment.)