Welcome to WebmasterWorld Guest from 54.226.183.49

Forum Moderators: not2easy

Message Too Old, No Replies

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

     

we5inelgr

9:29 pm on Apr 3, 2014 (gmt 0)



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.

we5inelgr

5:20 pm on Apr 8, 2014 (gmt 0)



Update:

I have another version of the css in the O/P, used to orient the tooltip popup box to the left (instead of to the right as with the above code). This "left" version works fine in that the popup box does not appear when i mouseover the area where the box would be if i were mousing over the icon to make it popup/show.

CSS for left version

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


Why would the .tooltipLeft version work fine (i.e. not show the tooltip unless mouseover image), and why would the .toolTipRight not work fine (i.e. does show the tooltip when mouseover area where tooltip would be if mouseover the image)?
 

Featured Threads

Hot Threads This Week

Hot Threads This Month