Jquery prop only working on first 'mouseover' event

Question

I am using a bootstrap tooltip to show the title of a map marker on mouseover. I am using 'prop' to set the title.

The problem is that the tooltip title attribute remains set as the first marker you mouseover.

markers[id].addListener('mouseover', function () {
    console.log(markers[id].title);
    /* get marker pixel position */
    var proj = overlay.getProjection();
    var pos = markers[id].getPosition();
    var p = proj.fromLatLngToContainerPixel(pos);
    /* show tooltip */
    $("#tooltip").css("left", p.x + "px").css("top", (p.y + 20) + "px").prop('title', markers[id].title).tooltip('show');
});

Please see fiddle - http://jsfiddle.net/n8x6r5kt/1/

The issue is that once the tooltip is initialized, it has the title stored and is not fetching it from the `title` attribute every time it displays. If you want to change the title of the tooltip without destroying it, see http://stackoverflow.com/questions/9501921/change-twitter-bootstrap-tooltip-content-on-click — Stryner, Nov 13 '15 at 14:29

Manish Mishra · Accepted Answer · 2015-11-13T14:49:23.760

See, there is one elementary problem with what you're doing, and that is your understanding of how bootstrap .tooltip() works. Anyhow, below is what you can do, remove the element and reinsert it i.e.

marker.addListener('mouseover', function () {

    var tooltip = $('#tooltip');

    /* get marker pixel position */
    var proj = overlay.getProjection();
    var pos = marker.getPosition();
    var p = proj.fromLatLngToContainerPixel(pos);

    //recreate tooltip
    tooltip.remove();
    tooltip = $(' <div id="tooltip" title="'+ marker.title+'"></div>');
    $('#map').after(tooltip);        

    //add new orientation
    tooltip.css({"left": p.x + "px", "top": (p.y + 10) + "px"});

    tooltip.tooltip();
    tooltip.tooltip('show');

});

see the fiddle

Other options that you can try is

Create individual tooltip containers for individual markers, that will save your extra processing on mouse hover
You can simply use google maps marker infowindow and inject your own custom (looking like bootstrap tooltip) html to it, why reinvent the wheel?(highly recommended)

1. I will be showing up to 2048 markers, would you still recommend? 2. I will be using the infowindow for additional content. — Vince Lowe, Nov 13 '15 at 14:55
ohh, so content 1 on mousehover and content 2 on click, no no, you are fine then :) — Manish Mishra, Nov 13 '15 at 14:57

Jquery prop only working on first 'mouseover' event

1 Answers1