1. The tooltip function only works in my IE 9 browser

2. I am unable to get the rounded corners to work in any browser.

If you could point me in the right direction I would appreciate it.

the website is mypcsolutions.biz

Since you can’t know the width of the containing element in advance, this is difficult to accomplish of course (percentages refer to the width respectively height of the containing element).

As long as the tooltip container is less or equal wide as the containing element, you don’t have a problem anyway.
So the problem only occurs when the containing element is narrower than the tooltip container, especially when it is a lot narrower.

A possible solution could be to use percentages instead of px for the position.
E.g.:

.tooltip:hover span {
position: absolute;
left: -50%; /*or right: -50%;*/
top: 110 %;
}


But an estimation on how much you have to offset the tooltip container in relation to the containing element is actually vague.
You can only play a bit around and try it out.

noRiddle

Some great stuff.

I have a question. Is there a way to alter the code below so that when a target is near the right-hand margin, the comment box doesn’t go off screen? If yes, what edits are necessary?

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

Thanks

It is possible to create a delay very easily using transitioning effects in CSS3. They should be applied to the tooltip’s main CSS rule (.tooltip).
In your CSS for the tooltip, I saw you added a great margin to the tooltip. I believe this is out-right wrong, and I would personally use the ‘display’ value instead.
Such would be achieved like:

(prepend removed)
transition: display 0s linear 1s;

This would be an immediate transition after 1 second.
If you wanted it to fade in, you would be able to use the opacity rule as well, as follows:

transition: display 0s linear 1s;
transition: opacity 2s ease-in-out 1s;

The element is hidden with an opacity of 0 to begin with. In the hover psuedo-element it is:
display:block; opacity: 1;

By doing the above two rules, the display element is removed completely then as the opacity would be 0 in the tooltip element, it will begin its fade-in after 1 second. It will take 2 seconds to fade in.
Hope someone may find this useful!

Shane Thompson