Tool Tip is blocked by the POPUP WIndow

Question

My tool tip is blocked by the POPUP Window. Please see the image here

http://www.tiikoni.com/tis/view/?id=6ffd82f

As you can see that My Tool tip is blocked by the pop up window.

My CSS for the tooltip is

elStyle = 'position:absolute; ;background-color:#fefbd6;height: 75px; position: absolute;top: 50px;width: 150px;font-weight:bold;height: 80px;border-color: #FFFF99 ;';

.flotr-mouse-value {
font-size: 13px;
font-weight:bold;
 }

.flotr-mouse-value:after {
    content:"";
    border-color: #fefbd6 transparent transparent transparent;
    border-style:solid;
    border-width:20px;
    width:0;
    height:0;
    position:absolute;

}

Please tell me how to resolve this??

Answer 1

The easiest way would be to make the window slightly wider to fully accommodate the tooltip.

Another way would be to change the tooltip to open on the right hand side of the point if the distance between the point and the right edge of the browser window is less than the width of the tooltip.

Answer 2

To complete thirtydot's answer with the left-hand side positioning of the tooltip.

Normal tooltip:

lStyle = 'position:absolute; ;background-color:#fefbd6;height: 75px; position: absolute;top: 50px;width: 150px;font-weight:bold;height: 80px;border-color: #FFFF99 ;';

Tooltip located to the left of the cursor:

lStyleLeft = 'position:absolute; ;background-color:#fefbd6;height: 75px; position: absolute;top: 50px;left:-150px;width: 150px;font-weight:bold;height: 80px;border-color: #FFFF99 ;';