You folks have been very helpful in showing me how to set up ToolTips to show popups on one of my web pages. Everything works great, except that some of the targets are close to the margin, causing the popup to be positioned partly off the screen.

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?


<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; }