Reposition flot-tooltip if its extreme left or right on the screen

Question

I am trying to display the tool-tip for the flot charts. When they hover over the bar, the too tip shows the corresponding values. My chart takes the whole screen width, when its on the extreme left the tootip is going beyond the screen and i don't see any value. How to reposition it if its on extreme left or extreme right. I am passing the item.pageX and item.pageY values. I am confused

#flot-tooltip {
        font-size: 12px;
        font-family: Verdana, Arial, sans-serif;
        position: absolute;
        display: none;
        border: 2px solid;
        padding: 2px;
        background-color: #FFF;
        opacity: 0.8;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
    }

function showTooltip(x, y, contents, z) {
        $('<div id="flot-tooltip">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y - 30, 
            left: x - 110,
            'border-color': z,
        }).appendTo("body").show();
    }

$("#flot-chart").bind("plothover", function(event, pos, item) {
        if(item) {
            if(previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $('#flot-tooltip').remove();
                var x = item.datapoint[0].toFixed(2);
                    y = item.datapoint[1].toFixed(2);
                    z = item.series.color;

                showTooltip(item.pageX, item.pageY, "<b>" + item.series.label + "</b><br /> <hr>" + y, z);

            }
        } else {
            $('#flot-tooltip').remove();
            previousPoint = null;
        }
    });

Answer 1

You may need to add some logic within your showTooltip function. Say for instance you want to limit x when it is too close to the left edge of the screen. You could add something to the effect of:

function showTooltip(x, y, contents, z) {
    if(x < 100){
     x = 100;
    }
  //rest of function
}

This should force the tooltip to appear where x equals 100 where the x value is less than your predefined value ( 100 being the example here).