1

tool tip <- This is how the tool tip usually looks when using Twitter Bootstrap. I'm trying to have a tooltip in a google map's info window. However, the tool tip that appears is different from the above picture, despite them being on the same page. This is how it looks: info window
I've inspected the html and it seems that the css that the google maps infowindow is using is overriding the bootstrap css. I've tried to override the css (following this: Overriding CSS styles of the jQuery UI Tooltip widget) but the tooltip in the info window doesn't change. Is there other way to get the tooltip in the infowindow to look like the first picture?

Community
  • 1
  • 1
DrowningInCode
  • 183
  • 2
  • 17
  • 1
    You should trigger bootstrap tooltip initialization after infowindow's content set. Try calling `domready` event for infowindows and inside, call `tooltip()` for the id of your content. – alpakyol Mar 18 '14 at 09:49

1 Answers1

2

I added:

google.maps.event.addListener(infowindow, 'domready', function() {
    $("#helpPop").tooltip({
        placement : 'right'                     
    });

and now it displays correctly

DrowningInCode
  • 183
  • 2
  • 17