cannot close jquery tooltip in a google map infobox

Question

In my application, I've a huge map on the dashboard and there I'm placing markers when ajax content is loaded. Each marker has specifically designed infobox where I've a link that has two clases:

1. tooltip
2. fancybox

On mouseover, I expect the tooltip opened and on mouseout I expect it to be closed and on click I expect three things:

1. the infobox to be closed
2. the fancybox to be opened
3. the tooltip to be closed

The problem is that on mouseover and mouseout, the tooltip acts as expected but when I click on the link, the infobox closes, the fancybox opens but the tooltip doesn't close and it looses the parent connection and never closes.

Here are my codes:

        var infowindow_options = {
            content: '...<a class="bind_tooltip">...</a>...',
            disableAutoPan: false,
            maxWidth: 0,
            alignBottom: true,
            pixelOffset: new google.maps.Size( 10, 10 ),
            zIndex: null,
            boxClass: 'info_window',
            closeBoxMargin: '10px 10px 0 0',
            closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif',
            pane: 'floatPane',
            enableEventPropagation: true,
            infoBoxClearance: '10px',
            position: mrkr.position
        };
        google.maps.event.addListener( mrkr, 'click', function() {
            infowindow ? infowindow.close() : '';
            infowindow = new InfoBox( infowindow_options );
            infowindow.open( map );
            return false;
        } );
        google.maps.event.addListener( map, 'click', function() {
            if( infowindow ) {
                infowindow.close();
                $( '.bind_tooltip' ).tooltip( 'close' );
            }
            return false;
        } );
        $( document ).tooltip( {
            items: '.bind_tooltip',
            content: function() {
                return $( this ).parent().find( '.tooltip' ).html();
            },
            position: {my: 'left top+10', at: 'center center'}
        } );

Also I get this error:

Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'

Answer 1

Initializing tooltip at the beginning didn't solve my problem. So I've solved the problem this way. I've added earlier a block of code that when click on map the infowinfow should close. That's why I was loosing my infowinfow reference. So removing the auto close solved my problem.

Answer 2

Initialize the tooltip before using it anywhere else in the script. You better do it at the beginning of script.

    var infowindow_options = {
        content: '...<a class="bind_tooltip">...</a>...',
        disableAutoPan: false,
        maxWidth: 0,
        alignBottom: true,
        pixelOffset: new google.maps.Size( 10, 10 ),
        zIndex: null,
        boxClass: 'info_window',
        closeBoxMargin: '10px 10px 0 0',
        closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif',
        pane: 'floatPane',
        enableEventPropagation: true,
        infoBoxClearance: '10px',
        position: mrkr.position
    };
    google.maps.event.addListener( mrkr, 'click', function() {
        infowindow ? infowindow.close() : '';
        infowindow = new InfoBox( infowindow_options );
        infowindow.open( map );
        return false;
    } );


    $( document ).tooltip( {
        items: '.bind_tooltip',
        content: function() {
            return $( this ).parent().find( '.tooltip' ).html();
        },
        position: {my: 'left top+10', at: 'center center'}
    } );

    google.maps.event.addListener( map, 'click', function() {
        if( infowindow ) {
            infowindow.close();
            $( '.bind_tooltip' ).tooltip( 'close' );
        }
        return false;
    } );