Tooltip over a Polygon in Google Maps

Question

I have polygons for various region and states in my application. Markers implement tooltip by taking the title attribute. On mouseover and mouseout over a polygon events can be fired. How do I create a tooltip that looks like the tooltip that is implemented for a marker.

Edit-1: Adding the code used to create the polygon and attach the handlers to show/hide tooltips.

function addPolygon(points) {
    var polygon = new google.maps.Polygon({
        paths: points,
        strokeColor: " #FFFFFF",
        strokeOpacity: 0.15,
        strokeWeight: 1.5,
        fillColor: "#99ff66",
        fillOpacity: 0.14
    });
    var tooltip = document.createElement('div');
    tooltip.innerHTML = "Alok";

    google.maps.event.addListener(polygon,'mouseover',function(){
        tooltip.style.visibility = 'visible';
    });
    google.maps.event.addListener(polygon,'mouseout',function(){
        tooltip.style.visibility = 'hidden';
    });
    polygon.setMap(map);
}

Answer 1

There's actually a neat trick to work around this (strange) limitation in Google Maps. When moving your mouse over a data item, you can just add a tooltip to the map's <div>. It will be added at the location where your mouse pointer currently is - right over the item!

map.data.addListener('mouseover', mouseOverDataItem);
map.data.addListener('mouseout', mouseOutOfDataItem);

...

function mouseOverDataItem(mouseEvent) {
  const titleText = mouseEvent.feature.getProperty('propContainingTooltipText');

  if (titleText) {
    map.getDiv().setAttribute('title', titleText);
  }
}

function mouseOutOfDataItem(mouseEvent) {
  map.getDiv().removeAttribute('title');
}

Answer 2

I think you will have to do it yourself.In a page i have implemented i attached a mouse move event to the page so i can record the mouse position.Then when a polygon mouseover event occurs i display a custom div near the mouse position

Hope it helps