Tooltip shows up in place where hidden tooltip box would be?

Hi all,

Sorry for the confusing title, couldn't settle on how to word it.

I've got a css tooltip that works as expected, except that it will display the tooltip box when the user mouses over where the box would be displayed if the user moused over the image.

CSS


.toolTipRight { /**** Positions tooltip below & to the right of the image. ****/
 outline: none;
 cursor: help;
 text-decoration: none;
 position: relative;
}
.toolTipRight span {
 position: absolute;
 top: .5em;
 left: 0em;
 width: 300px;
 margin-right: -99em;
 opacity: 0;
 text-decoration: none !important;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;

 box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
 -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
 -moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.4);

 -moz-transition-property: opacity;
 -moz-transition-duration: 1s;
 -webkit-transition-property: opacity;
 -webkit-transition-duration: 1s;
 -o-transition-property: opacity;
 -o-transition-duration: 1s;
}

.toolTipRight.left span {
 -moz-transition-property: opacity, margin-left, left;
 -moz-transition-duration: 1s;
 -webkit-transition-property: opacity, margin-left, left;
 -webkit-transition-duration: 1s;
 -o-transition-property: opacity, margin-left, left;
 -o-transition-duration: 1s;
}
.toolTipRight.top span {
 margin-left: auto;
 -moz-transition-property: opacity, top;
 -moz-transition-duration: 1s;
 -webkit-transition-property: opacity, top;
 -webkit-transition-duration: 1s;
 -o-transition-property: opacity, top;
 -o-transition-duration: 1s;
}
.toolTipRight:hover span {
 text-align:left;
 z-index: 999;
 margin-left: 0;
 opacity: 1;
}
.toolTipRight.top:hover span {
 top: 2em;
 margin-left: auto;
}
.toolTipRight img {
position: absolute;
border: 0;
float: left;
}
.toolTipRight em {
font: 700 1.2em;
display: block;
padding: 0.2em 0 0.6em 0;
}

.info { background: #CCFF99; border: 1px solid #000; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }

HTML


<span class="toolTipRight"><img src="images/info.png"><span class="custom info"><em>Headline</em>Some additional information here.</span></span>

If I mouseover the info icon, the tooltip pops up as expected.

However, if I simply run the mouse pointer over the area where the tooptip box would show, the tooltip pops up as well (even though I'm not mousing over the info icon).

Ideas on why it would do that?

Thanks.

/**** Used for images/icons Left justified. ****/ .toolTipLeft { /**** Actually, positions tooltip on the LEFT of the image. ****/ outline: none; cursor: help; text-decoration: none; position: relative; } .toolTipLeft span { position: absolute; top: .5em; right: -1em; width: 250px; margin-right: -99em; opacity: 0; text-decoration: none !important; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.4); -moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.4); -moz-transition-property: opacity; -moz-transition-duration: 1s; -webkit-transition-property: opacity; -webkit-transition-duration: 1s; -o-transition-property: opacity; -o-transition-duration: 1s; } .toolTipLeft.right span { -moz-transition-property: opacity, margin-right, right; -moz-transition-duration: 1s; -webkit-transition-property: opacity, margin-right, right; -webkit-transition-duration: 1s; -o-transition-property: opacity, margin-right, right; -o-transition-duration: 1s; } .toolTipLeft.top span { margin-right: auto; -moz-transition-property: opacity, top; -moz-transition-duration: 1s; -webkit-transition-property: opacity, top; -webkit-transition-duration: 1s; -o-transition-property: opacity, top; -o-transition-duration: 1s; } .toolTipLeft:hover span { text-align:left; z-index: 99; margin-right: 0; opacity: 1; } .toolTipLeft.top:hover span { top: 2em; margin-right: auto; } .toolTipLeft img { position: absolute; border: 0; float: right; } .toolTipLeft em { font: 700 1.2em; display: block; padding: 0.2em 0 0.6em 0; }

Tooltip shows up in place where hidden tooltip box would be?

we5inelgr

we5inelgr

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week