FlotJS tooltip messing with the responsiveness?

Question

I am working on an application where I am using FlotJS charting library to plot graphs and I have turned on the tooltips so that users can hover over points and can tell the content of each point on a particular date.

Like in this interactive graph example by flot, we can hover over the points to see the values of sin and cos.

I am using the Smart Admin Responsive Theme in my project and if you navigate to the demo of graphs they are offering, there is also a section on Flot Chart Demos

If you look closely on the Sin Chart which is second in order, it is similar to what I am doing. Hovering over the points presents tooltips to view the value of sin.

The problem I am facing is that if you hover over the last few points, the tooltip appears but it messes with the responsiveness of the page and is not visible per say.

How to go around this problem? Is there some way I can make the tooltip appear to the left of the mouse pointer when it is on the end of the page?

EDIT

Options Object

var layerOptions = {
    xaxis : {
        mode : "time"
    },
    legend : {
        show : true,
        noColumns : 1, // number of colums in legend table
        labelFormatter : null, // fn: string -> string
        labelBoxBorderColor : "#000", // border color for the little label boxes
        container : null, // container (as jQuery object) to put legend in, null means default on top of graph
        position : "ne", // position of default legend container within plot
        margin : [0, 5], // distance from grid edge to default legend container within plot
        backgroundColor : "#efefef", // null means auto-detect
        backgroundOpacity : 0.4 // set to 0 to avoid background
    },
    tooltip : true,
    tooltipOpts : {
        content : "<b>%s</b> content on <b>%x</b> was <b>%y</b>",
        dateFormat : "%y-%m-%d",
        defaultTheme : false
    },
    grid : {
        hoverable : true,
        clickable : true
    },
    series: {
        /*bars: {
            show: true, 
            barWidth: 1000 * 60 * 60 * 24 * 30,
            order: 1
        }*/
    }
};

Answer 1

Yes, you can set the position of the tooltip dynamically depending on window size. I use this in one of my flot pages to flip the tooltip to the left when near the right border:

var prevPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
    if (item) {
        if (prevPoint != item.dataIndex) {
            prevPoint = item.dataIndex;
            $("#tooltip").remove();

            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2),
                text = item.series.label + ' content on ' + x + ' was ' + y;
            showTooltip(item.pageX, item.pageY, text);
        }
    } else {
        $("#tooltip").remove();
        prevPoint = null;
    }
});

function showTooltip(x, y, content) {
    var cssParams = {
        position: 'absolute',
        display: 'none',
        border: '1px solid #888888',
        padding: '2px',
        'background-color': '#eeeeee',
        opacity: 0.8
    };
    if (x < 0.8 * windowWidth) {
        cssParams.left = x + 3;
    }
    else {
        cssParams.right = windowWidth - x + 6;
    }
    if (y < 0.8 * windowHeight) {
        cssParams.top = y + 3;
    }
    else {
        cssParams.bottom = windowHeight - y + 6;
    }
    $('<div id="tooltip">' + content + '</div>').css(cssParams).appendTo('body').fadeIn(100);
}

windowHeight and windowWidth are global variables which are updated in the resize event (using $(window).height()). You can also use the dimensions of a container element if you like.

You can remove the tooltip plugin and options when you use the given events/functions.