How to achieve the Yelp Map Marker/Tooltip Effect in Google Maps?

Question

Ok so here's the deal,

I'm trying to display a tooltip (instead of the ginfowindow) over some Yelp Map Markers that I am pulling onto a Google Map.

I would like to have the exact same effects as Yelp. i.e. The tooltip seems to be set such that it's z-index is always above all other elements nearby, it moves the tooltip once it appears it is getting too close to the top of the page/bottom of the page, etc...

So far I have been able to get the z-index of the tooltip to appear correctly by appending the tooltip to the body (as opposed to the map). I thought I was on the right track but then I checked the implementation on a larger monitor and realized that the solution I had come up with was pushing the tooltips out too far right. See the code below:

 GEvent.addListener(marker,'mouseover',function(){
  showMessage(this, infoWindowHtml);
 });

 GEvent.addListener(marker,'mouseout',function(){
  $("#tooltip").hide();
 });
/*
* Displays a Tooltip for the currently hovered marker
*/
function showMessage (marker, text) {
 var markerOffset = ymap.fromLatLngToContainerPixel(marker.getPoint());

 theight = 20;

 twidth = 175;
 var twidth2 = $(".maincontent").width() + 12;

 $("#tooltip")
  .fadeIn()
  .html("<div class='content'>"+text+"</div>") 
  .css({ top: markerOffset.y - theight, left: markerOffset.x + twidth2 - twidth/2 })
  .appendTo("body");
}

Based on this code, does anyone see what I may be doing wrong with this tooltip implementation?

Answer 1

dnyce, can you share your code ?

Answer 2

Looks like this is the best I could wrangle up.

Hopefully it helps you a bit Fvant?

/*
* Hide our tooltip DIV until a
* point has been hovered over 
* on the map
*/
$("#tooltip").hide();


/*
* Creates a marker for the given business and point
*/

function createMarker(biz, point, markerNum, category) { var infoWindowHtml = generateInfoWindowHtml(biz) var marker = new GMarker(point, yicon); marker.mycategory = category;

 yelpMarkers.push(marker);

 ymap.addOverlay(marker);

 GEvent.addListener(marker,'mouseover',function(){
  showMessage(this, infoWindowHtml);   
 });

 GEvent.addListener(marker,'mouseout',function(){
  $("#tooltip").hide();
 });

}

/*
* Displays a Tooltip for the currently hovered marker
*/
function showMessage (marker, text) {

 var markerOffset = ymap.fromLatLngToContainerPixel(marker.getPoint());
 var winWidth = $(window).width();
 var winHeight = $(window).height();

 var theight = 20;

 //The twidth number below is half of our tooltip width.
 var twidth = 175;

 /*
 * The twidth2 number below is the width of the main content 
 * container area. Assumes a default window width of 1265
 */
 var twidth2 = 397;

 var extraPad;
 var tLeft;
 var tTop;

 // Setup our tooltip's width offset for different window widths
 if (winWidth > 1265) {
  extraPad = winWidth - 1265;
  tLeft = markerOffset.x + twidth2 + (extraPad/2);
 } 
 else if (winWidth < 1265) {
  extraPad = 1265 - winWidth;
  tLeft = markerOffset.x + twidth2 - (extraPad/2);
 }
 else { tLeft = markerOffset.x + twidth2; }

 // Setup our tooltip's height offset for different window height
 tTop = markerOffset.y - theight;

 $("#tooltip")
  .fadeIn()
  .html("<div class='content'>"+text+"</div>") 
  .css({ top: tTop, left: tLeft })
  .appendTo("body");

}

Answer 3

I tried this example but my tooltip div is still showing up at the bottom of the page. Can you share you tooltip div css (other than the css added w/ jQuery)?

Any issues to be aware of or something I might be overlooking?

Thanks.