在地图标记上显示工具提示

Question

I want to show twitter bootstrap tooltip option when I hover on map marker so I do this:

function createMarker(place){
    var placeLoc=place.geometry.location;

      var image = 'https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&psize=14&font=fonts/Roboto-Regular.ttf&color=fffa4c38&ax=44&ay=48&scale=1';


    marker = new RichMarker({
          position: placeLoc,
          shadow: 0,
          map: map,
      content: '<div class="kikonica" data-toggle="tooltip" data-placement="right"><img src='+image+'</img></div>',
          });

So my marker is html code with class .kikonica . I try to add tooltip with:

$(function() {
  $('.kikonica').tooltop({placement: 'right'});
});

bt dont work. What is problem here? I really dont understand why I cant show tooltip on map-marker hover... please help

Answer 1

At first glance it Looks like you have a typo.

$('.kikonica'). tooltop ({placement: 'right'});

$(function() {
  $('.kikonica').tooltip({placement: 'right'});
});

Edit: 1

I think you have to have a title attribute for the tooltip to work.

...

content: '<div title="my tooltip text" class="kikonica" data-toggle="tooltip" data-placement="right"><img src='+image+'</img></div>',

...

Edit 2

// check if .kikonica exists

$(function() {

  alert ($('.kikonica').length);

if($('.kikonica').length > 0){

  $('.kikonica').tooltip({placement: 'right'});
}
});

Edit 3

setTimeout(function(){

$('.kikonica').tooltip({placement: 'right'});

},50); // increse this value (50) to higher if needed

Edit 4 Use this signature

  google.maps.event.addListener(marker, 'mouseover', function() {

     $('.kikonica').tooltip({placement: 'right'});

  });

Answer 2

A bit late to the party... But I would add the tooltip when the map is fully loaded to ensure correct tooltip behavior. Adding it on mouseover prevents it from displaying the very first hover.

    // Add tooltips when map is fully loaded
    google.maps.event.addListenerOnce(map, 'idle', function(){
        $('.kikonica').tooltip({placement: 'right'});
    });