Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question 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
    Code:
    .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
    Code:
    <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.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,722
    Thanks
    25
    Thanked 662 Times in 661 Posts
    Here's mine. try it:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    a.tooltip {outline:none; }
    a.tooltip strong {line-height:30px;}
    a.tooltip:hover {text-decoration:none;}
    a.tooltip span {
    	z-index:10;
    	display:none;
    	padding: 10px 20px;
    	margin-left:28px;
    	width:240px;
    	line-height:16px;
    }
    a.tooltip:hover span{
    	display:inline;
    	position:absolute;
    	color:#111;
    	border:1px solid #000;
    	background:#CCFF99;  // #fffAF0;
    }
    .callout {z-index:20;position:absolute;top: 0px;border:0;left:-12px;}
    
    a.tooltip span {
    	border-radius:4px;
    	-moz-border-radius: 4px;
    	-webkit-border-radius: 4px;
    	-moz-box-shadow: 5px 5px 8px #CCC;
    	-webkit-box-shadow: 5px 5px 8px #CCC;
    	box-shadow: 5px 5px 8px #CCC;
    }
    </style>
    </head>
    
    <body>
    <a href="#" class="tooltip"> Tooltip
    <span>
    	<img class="callout" src="images/arr_blue_2.gif" /> <!-- This is a small blue arrow pointing to tip. Not Needed-->
    	<em>Headline</em><br />
    	Some additional information here.
    </span>
    </a>
    
    
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Many thanks for your reply. I've got similar code I use for text with the dotted underline as well.

    I'n the case of the O/P, I'm looking to use the image and the mouseover item and not text. Thanks again though.

    Any other ideas?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,722
    Thanks
    25
    Thanked 662 Times in 661 Posts
    Makes no sense. Use
    Code:
    <a href="#" class="tooltip"><img src="images/1.jpg" />
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    New Coder
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    /**** 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)?
    Last edited by we5inelgr; 04-08-2014 at 07:24 PM.

  • #6
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Set the initial width and height of the tooltip to 4px or less, then on the hover simply include the real width you need for display.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&

  • #7
    New Coder
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by COBOLdinosaur View Post
    Set the initial width and height of the tooltip to 4px or less, then on the hover simply include the real width you need for display.
    Great tip! Many thanks!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •