title: How to achieve the Yelp Map Marker/Tooltip Effect in Google Maps?
body: <p>Ok so here's the deal,</p>
  
  <p>I'm trying to display a tooltip (instead of the ginfowindow) over some Yelp Map Markers that I am pulling onto a Google Map. </p>
  
  <p>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...</p>
  
  <p>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:</p>
  
  <pre><code>    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("&lt;div class='content'&gt;"+text+"&lt;/div&gt;") 
          .css({ top: markerOffset.y - theight, left: markerOffset.x + twidth2 - twidth/2 })
          .appendTo("body");
  }
  </code></pre>
  
  <p>Based on this code, does anyone see what I may be doing wrong with this tooltip implementation?</p>