How do I create a tooltip with overflow visible in Google Maps V3?

Question

I'm trying to create a tooltip that overflows outside the map if necessary but I can't figure it out.
I have implemented the tooltip with help from this guy and it works like a charm except that when the tooltip is to large it doesn't overflow outside of the map box.

In my create marker method where I create and populate my markers with data i create the tooltip.

createMarker

function createMarker(number, currentMap, currentMapData) {
                var marker = new MarkerWithLabel({
                    position:new google.maps.LatLng(currentMapData[0], currentMapData[1]),
                    map:currentMap,
                    icon:'/img/sticker/empty.png',
                    shadow:'/img/sticker/bubble_shadow.png',
                    transparent:'/img/sticker/bubble_transparent.png',
                    draggable:false,
                    raiseOnDrag:false,
                    labelContent:"" + number,
                    labelAnchor:new google.maps.Point(3, 30),
                    labelClass:"mapIconLabel", // the CSS class for the label
                    labelInBackground:false
                });

                var html = mapHtml(currentMapData[7], currentMapData[2], currentMapData[4], currentMapData[13], currentMapData[11], currentMapData[12], currentMapData[3], currentMapData[5])

                var tooltipOptions = {marker:marker, content:html, cssClass:'tooltip', href:"/"+currentMapData[7]};
                // create the tooltip
                var tooltip = new Tooltip(tooltipOptions);
            }

tooltip.js

function Tooltip(options) {

    // Now initialize all properties.
    this.marker_ = options.marker;
    this.content_ = options.content;
    this.map_ = options.marker.get('map');
    this.cssClass_ = options.cssClass||null;

    // We define a property to hold the content's
    // div. We'll actually create this div
    // upon receipt of the add() method so we'll
    // leave it null for now.
    this.div_ = null;

    //Explicitly call setMap on this overlay
    this.setMap(this.map_);
    var me = this;
    // Show tooltip on mouseover event.
    google.maps.event.addListener(me.marker_, 'mouseover', function() {
        me.show();
    });
    // Hide tooltip on mouseout event.
    google.maps.event.addListener(me.marker_, 'mouseout', function() {
        me.hide();
    });

    // When clicked move to href
    google.maps.event.addListener(me.marker_, 'click', function() {
        window.location.href = options.href;
    });

}
// Now we extend google.maps.OverlayView()
Tooltip.prototype = new google.maps.OverlayView();

// onAdd is one of the functions that we must implement,
// it will be called when the map is ready for the overlay to be attached.
Tooltip.prototype.onAdd = function() {

    // Create the DIV and set some basic attributes.
    var div = document.createElement('DIV');
    div.style.position = "absolute";
    // Hide tooltip
    div.style.visibility = "hidden";
    if(this.cssClass_)
        div.className += " "+this.cssClass_;

    //Attach content to the DIV.
    div.innerHTML = this.content_;

    // Set the overlay's div_ property to this DIV
    this.div_ = div;

    // We add an overlay to a map via one of the map's panes.
    // We'll add this overlay to the floatPane pane.
    var panes = this.getPanes();
    panes.floatPane.appendChild(this.div_);

}
// We here implement draw
Tooltip.prototype.draw = function() {

    // Position the overlay. We use the position of the marker
    // to peg it to the correct position, just northeast of the marker.
    // We need to retrieve the projection from this overlay to do this.
    var overlayProjection = this.getProjection();

    // Retrieve the coordinates of the marker
    // in latlngs and convert them to pixels coordinates.
    // We'll use these coordinates to place the DIV.
    var ne = overlayProjection.fromLatLngToDivPixel(this.marker_.getPosition());

    // Position the DIV.
    var div = this.div_;
    div.style.left = ne.x + 'px';
    div.style.top = ne.y + 'px';

}
// We here implement onRemove
Tooltip.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
}

// Note that the visibility property must be a string enclosed in quotes
Tooltip.prototype.hide = function() {
    if (this.div_) {
        this.div_.style.visibility = "hidden";
    }
}

Tooltip.prototype.show = function() {
    if (this.div_) {
        this.div_.style.visibility = "visible";
    }
}

I have tried to set this.div_.style.overflow = "visible"; in code and with css but It doesn't work. Do you have any idea what I should do? To sum it up: How do I make my tooltop overflow outside the map?

Answer 1

Using @Dr.Molle's suggestion here's a basic template for overflowing tooltips on google maps. It should give you a start on however you want to extend it in your own implementation. Here's a jsfiddle demo that you can use to follow along.

First thing I did was create a div to hold the info I want in my tooltip. Next, apply some initial styling to this container:

#marker-tooltip {
  display: none;
  position:absolute;
  width: 300px;
  height: 200px;
  background-color: #ccc;
  margin: 15px;
}

Keep in mind, the tooltip div should be included inside the same parent container as your map's div (for the positioning to work properly).

Next we want to store the information we include inside the tooltip somewhere, I did this by creating an attribute to the marker object called tooltipContent:

marker.tooltipContent = 'this content should go inside the tooltip';

Then, you want to be able to set the content to the tooltip div and show it when the user mouseover's on the marker - and you can do this using the map api's event listener for mouseover on the marker and using jQuery's $.html() and $.show() functions:

google.maps.event.addListener(marker, 'mouseover', function () {        
    $('#marker-tooltip').html(marker.tooltipContent).show();
});

Now, you have the tooltip with it's contents showing on mouseover of the marker - however it's not positioned properly. This is the tricky part. You need to find the pixel coordinates of the map's div that the marker's latlng is currently on. Luckily, the maps api has functions to obtain these values - and for simplicity I borrowed the solution posted here. If you're interested in further readings behind this, I suggest starting with the section on Map Coordinates in the doc.

Anyways, once you've made a reference to the function provided in that solution - you can obtain the pixel values of the marker:

var point = fromLatLngToPoint(marker.getPosition(), map);

Where point.x will equal the horizontal pixel value on the map's div and point.y will equal the vertical pixel value on the map's div. Once you have these values, you can change the tooltip's absolute position accordingly using $.css() method. So the listener will be updated to:

google.maps.event.addListener(marker, 'mouseover', function () {
    var point = fromLatLngToPoint(marker.getPosition(), map);
    $('#marker-tooltip').html(marker.tooltipContent).css({ 'left': point.x, 'top': point.y }).show();
});

And of course, you should add a listener for the mouseout event on the marker to hide the tooltip:

google.maps.event.addListener(marker, 'mouseout', function () {
    $('#marker-tooltip').hide();
});