Applying tooltip over multiple plots

Question

Can someone show me in the following example

How to implement the tooltip in 2 plots, so when I hover over "series 1" in one plot it will show a tooltip for "series 1" in both plots?

Thank you very much for your help and consideration.

1) http://jsfiddle.net/X2q69/1/

function showTooltip(x, y, contents, z) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 30,
        left: x - 11,
        'font-weight': 'bold',
        border: '1px solid rgb(255, 221, 221)',
        padding: '2px',
        'background-color': z,
        opacity: '0.8'
    }).appendTo("body").show();
}


 var previousPoint = null;
 $(".chart").bind("plothover", function (event, pos, item) {
     if (item) {
         if (previousPoint != item.datapoint) {
             previousPoint = item.datapoint;

             $("#tooltip").remove();
             var x = item.datapoint[0],
             y = item.datapoint[1] - item.datapoint[2];

             showTooltip(item.pageX, item.pageY, item.series.label, item.series.color);             
         }
     } else {
         $("#tooltip").remove();
         previousPoint = null;
     }
 });

Answer 1

Here's an example. It'll create a tooltip on both plots on any matching series label and x datapoint value:

$(".chart").bind("plothover", function (event, pos, item) {
    if (item){
        $(".tooltip").remove(); // remove previous tooltips
        var label = item.series.label;
        $([plot1, plot2]).each(function(i,plotObj){ // loop our plots
            var someData = plotObj.getData();
            for (var i=0; i<someData.length; i++){
                if (someData[i].label == label){ // found matching series label
                    for (var j = 0; j < someData[i].data.length; j++){
                        var point = someData[i].data[j];
                        if (point[0] == item.datapoint[0]){ // found matching x point
                            var somePos = plotObj.pointOffset({x: point[0], y: point[1]}); // position of point in plot 
                            var divPos = plotObj.getPlaceholder().offset(); //position of div on page
                            showTooltip(somePos.left+divPos.left, somePos.top+divPos.top, label, item.series.color); // create tooltip
                        }
                    }
                }                
            }               
        });
    }        
});

Working fiddle here.