google map, show tooltip on a circle

You can also use InfoWindow instead of html title attribute, as the title may not show up always on mouse over. InfoWindow looks pretty good.

var infowindow = new google.maps.InfoWindow({});
var marker = new google.maps.Marker({
    map: map
});

Then use same mouseover event mechanism to show the InfoWindow:

google.maps.event.addListener(circle, 'mouseover', function () {
 if (typeof this.title !== "undefined") {
    marker.setPosition(this.getCenter()); // get circle's center
    infowindow.setContent("<b>" + this.title + "</b>"); // set content
    infowindow.open(map, marker); // open at marker's location
    marker.setVisible(false); // hide the marker
   }
});

google.maps.event.addListener(circle, 'mouseout', function () {
 infowindow.close();
});

The tooltip is created via the native title-attribute of DOM-elements, but the API doesn't provide any method to access the DOMElement that contains the circle.

A possible workaround may be to use the title-attribute of the map-div instead(set it onmouseover and remove it onmouseout)

        //circle is the google.maps.Circle-instance
        google.maps.event.addListener(circle,'mouseover',function(){
             this.getMap().getDiv().setAttribute('title',this.get('title'));});

        google.maps.event.addListener(circle,'mouseout',function(){
             this.getMap().getDiv().removeAttribute('title');});

Also we can add event listener direct on google.maps.Circle instance.

Code sample:

//circle is the google.maps.Circle-instance
circle.addListener('mouseover',function(){
    this.getMap().getDiv().setAttribute('title',this.get('title'));
});

circle.addListener('mouseout',function(){
    this.getMap().getDiv().removeAttribute('title');
});

Just wrote for alternative!