homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




msg:4660177
 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




msg:4661471
 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)?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved