How to Keep ToolTips Popup on Screen?

[BSquared1000]

Hi,

I've used ToolTips on one of my web pages to simulate what the "Comments" feature looks like in MS Word (i.e., yellow highlighting; comment pops up on cursor over target). Everything works great, except that when a target is close to the right-hand margin, the popup is positioned partly off the screen and cannot be read completely.

I've tried to find the solution online but haven't been able to make it work.

How would I edit the code below to assure that all popups would be completely on the screen?

Thanks,
Bill

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.tooltip {
color: #000000; outline: none;
cursor: default; text-decoration: none;
position: relative;
background-color: yellow;
text-indent: 0pt;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.tooltip:hover img {
border: 0; margin: -10px 0 0 -55px;
float: left; position: absolute;
}
.tooltip:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }

</style>