CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3google-maps-markers
pufAmuf
pufAmuf

Reputation: 7805

Mouseover Tooltip jquery (tipsy)

I tried 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/

Upvotes: 0

Views: 3004

Answers (3)

joserobleda
joserobleda

Reputation: 818

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!

Upvotes: 1

Trott
Trott

Reputation: 70075

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

Upvotes: 0

QuentinUK
QuentinUK

Reputation: 3077

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

Upvotes: 1

Related Questions