How to make page window borders not to interpt Tool Tip DIsplay

Please see my Image here http://www.tiikoni.com/tis/view/?id=eba96bb

As you can see that the tool tip is being displayed beside the window , how to solve this ??

My code and css which is responsible to show the Marker is

'position:absolute; z-index:1;background-color:#fefbd6;border-bottom:30px;height: 75px;-moz-box-shadow: 3px 3px 3px #666; -webkit-box-shadow: 3px 3px 3px #666;position: absolute;box-shadow: 3px 3px 3px #666;left: 50px;top: 50px;width: 150px;border-top: 20px;  font-weight:bold;  sol开发者_如何学运维id #77c;height: 80px;border-color: #FFFF99 transparent transparent transparent;';

and my css for this

.flotr-mouse-value {
    font-size: 14px;
    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;
    bottom:-40px;
    left:20px
}

Please help as how to resolve this

I believe you will have to implement a javascript detection method to detect when the tooltip will appear near the right edge of the window. You can then reposition your tooltip accordingly or maybe change its anchor point.