SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 44
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    CSS tooltip: how to auto center over element?

    CSS tooltip: how to auto center over element? I'm following this guys code. I want the tooltip widthless like his example code. But his code doesn't center. Each tooltip will be different length of text. If I give it a width then centering is easy. But how to without? Thanks.

    http://forrst.com/posts/Simple_pure_...with_arrow-BkY

    The markup...

    <a href="#" title="Sample tooltip" class="tooltip">Link</a>

    .tooltip{display:inline;position:relative}
    .tooltip:hover{text-decoration:none}
    .tooltip:hover:after{
    background:#111;
    background:rgba(0,0,0,.8);
    border-radius:5px;
    bottom:18px;
    color:#fff;
    content:attr(title);
    display:block;
    left:50%;
    padding:5px 15px;
    position:absolute;
    white-space:nowrap;
    z-index:98
    }
    .tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:12px;
    content:"";
    display:block;
    left:75%;
    position:absolute;
    z-index:99
    }

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I guess this is not possible. I'd like it to be though if anyone has any bright ideas. If not ill just put a width on it in ems. That should work.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Eric,

    Yes with a width its easy to do but not so easy fluid.

    You can do it for Firefox only without changing the markup like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    .tooltip {
    	display:inline;
    	position:relative
    }
    .tooltip:hover { text-decoration:none }
    .tooltip:hover:after {
    	background:#111;
    	background:rgba(0,0,0,.8);
    	border-radius:5px;
    	bottom:18px;
    	color:#fff;
    	content:attr(title);
    	display:table;
    	left:-1000px;
    	right:-1000px;
    	margin:auto;
    	padding:5px 15px;
    	position:absolute;
    	white-space:nowrap;
    	z-index:98;
    	text-align:center;
    }
    .tooltip:hover:before {
    	border:solid;
    	border-color:#111 transparent;
    	border-width:6px 6px 0 6px;
    	bottom:12px;
    	content:"";
    	display:block;
    	left:50%;
    	margin-left:-3px;
    	position:absolute;
    	z-index:99
    }
    </style>
    </head>
    
    <body>
    </body>
    <h1>Firefox only</h1>
    <p>This is some text to testing<a href="#" title="Sample tooltip with much longer text" class="tooltip">Link</a>and some more text and some more text and some more text and some<a href="#" title="Sample tooltip" class="tooltip">Link</a>more text and some more text and some more text text and some more text and some<a href="#" title="Sample" class="tooltip">Link</a>more text and some more text and some more text</p>
    </body>
    </html>
    Other browsers won't play ball and you would need to add an extra element and move the tooltip which kind of defeats the purpose a bit.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    .tooltip {
    	display:inline-block;
    	position:relative
    }
    .tooltip:hover { text-decoration:none }
    .tooltip b {
    	bottom:18px;
    	margin:auto;
    	position:absolute;
    	display:block;
    	z-index:98;
    	text-align:center;
    	left:-1000px;
    	right:-1000px;
    }
    .tooltip:hover b:after {
    	background:#111;
    	background:rgba(0,0,0,.8);
    	border-radius:5px;
    	color:#fff;
    	content:attr(title);
    	display:table;
    	margin:auto;
    	padding:5px 15px;
    	white-space:nowrap;
    	z-index:98;
    	text-align:center;
    }
    .tooltip:hover b:before {
    	border:solid;
    	border-color:#111 transparent;
    	border-width:6px 6px 0 6px;
    	bottom:-6px;
    	content:"";
    	display:block;
    	left:50%;
    	margin-left:-3px;
    	position:absolute;
    	z-index:99
    }
    </style>
    </head>
    
    <body>
    </body>
    <p><a href="#">test</a></p>
    <p>This is some text to testing<a href="#" class="tooltip">Link<b title="Sample tooltip with much longer text"></b></a>and some more text and some more text and some more text and some<a href="#"  class="tooltip">Link<b title="Sample tooltip"></b></a>more text and some more text and some more text text and some more text and some<a href="#" class="tooltip">Link<b title="Sample"></b></a>more text and some more text and some more text</p>
    </body>
    </html>

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul you rock! I'll take the all browser one. I am actually going to get rid of the title and just use a span because otherwise I quickly found I can't get rid of the default title. Looks like the process would be somewhat the same huh? Or can that code be trimmed then? I took a good year off web stuff. I'm a bit rusty. Thanks Paul.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Eric,

    You'd need another element such as a span if you aren't using the title attribute text.

    e.g.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    .tooltip {
    	display:inline-block;
    	position:relative
    }
    .tooltip:hover { text-decoration:none }
    .tooltip span {
    	bottom:18px;
    	margin:auto;
    	position:absolute;
    	display:block;
    	z-index:98;
    	text-align:center;
    	left:-1000px;
    	right:-1000px;
    }
    .tooltip b {
    	background:#111;
    	background:rgba(0,0,0,.8);
    	border-radius:5px;
    	color:#fff;
    	display:none;
    	margin:auto;
    	padding:5px 15px;
    	white-space:nowrap;
    	z-index:98;
    	text-align:center;
    }
    .tooltip:hover b { display:table; }
    .tooltip:hover b:before {
    	border:solid;
    	border-color:#111 transparent;
    	border-width:6px 6px 0 6px;
    	bottom:-6px;
    	content:"";
    	display:block;
    	left:50%;
    	margin-left:-3px;
    	position:absolute;
    	z-index:99
    }
    </style>
    </head>
    
    <body>
    <h1>IE8+ only</h1>
    <p>This is some text to testing <a href="#" class="tooltip">Link<span><b> Sample tooltip with much longer text</b></span></a> and some more text and some more text and some more text and some <a href="#"  class="tooltip"><span><b>Sample tooltip</b></span>Link</a> more text and some more text and some more text text and some more text and some <a href="#" class="tooltip">Link<span><b>Sample</b></span></a> more text and some more text and some more text</p>
    </body>
    </html>
    If you needed to support ie7 and under then you'd need to give them a width and use display block instead of display:table (and a:hover{visibility:visible} to fix the ie7- bug )

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks a ton Paul. Nice job. You just posted the only css centered tooltip solution on the web. That is unless my google skills are rusty too. Silly me I thought it would be easier without the title. I'll go play with this...

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Eric and Paul nice to see you both around here again !

    I saw Eric's post earlier this evening and had come up with a solution similar to Paul's, but was too dissatisfied with the fact that I needed an extra, empty, element. :/.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<style type="text/css">
    			.tool {position: relative;  }
    			.tool i {position: absolute; width:100%; left:-99999em; text-align: center; }
    			.tool i:before { content:attr(title); left:-9999em; background: pink;  display:inline-block; padding:.25em; border-radius:7px; white-space: nowrap}
    			.tool:hover i {left:0;bottom:100% }
    			
    			/** for the  arrow shape **/
    			.tool  i:after {
     	border: 6px solid transparent;
     	border-top-color:pink;
    	top: 100%;
    	content:"";
    	display:block;
    	left:-99999em;
    	margin-left:-3px;
    	position:absolute;
    	z-index:100
    }
    			.tool:hover i:after { left:50%;}
    
     		</style>
    	</head>
    	<body>
    <div>
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in  dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt <a href="#" class='tool'>mollit anim id est .Lorem ipsum dolor sit amet<i title='ray & roni'></i></a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.lorem
    
    </div>
    	</body>
    </html>
    The one advantage of my solution is that it's fluid, it wraps, and it doesn't It doesn't cause scroll bars.

    Am still satisfied that it needed that extra element tho. if I figure something else out I will make an additional post.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Nice job desden_phoenix. that looks good too. Unfortunately it seems I have to move away from the title method because I can't get any JS'ers to give me a solution to remove the default title but allow css access to it. So the span method is the best prob now. The big jquery tool tips (5kb+ guys) remove it and then use it. So I know it's possible. I was hopeing to just use a small script. But no luck. I was trying to move away from the span because it could be considered wrong in the eyes of the search engines. For something as insignificant as a tooltip I can't justify an additional script. So css only it is.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    remove the default title but allow css access to it
    In my method I put it on <I> tag; remove the title from the anchor so you dont have to put on the tag you mean?

    You could use js or jQ with the following logic:

    1) select ALL .tooltips
    2) store the attr in a variable
    3) select each tool tip's <I>'s, $(this, 'i') in jQ, and set that attribute to the variable's value
    4) then set that sames tooltip's tittle attribute to ='' ( which essentially removes it!)

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Eric and Paul nice to see you both around here again !
    Thanks Ray, I didn't expect to be off for 5 weeks with a broken phone line but its back working now although I have 5 weeks work to catch up on now .

    Good job on the tooltip Ray but unless I'm mistaken the tooltip doesn't center if the tooltip is longer than the link text it sits in. It just starts from the left of the link.

    The scrollbar on hover is the drawback to my method above (and I didn't actually notice it) but it can be fixed with an alternative method shown below.

    I was hopeing to just use a small script.
    If you are already using jquery then it would be quite easy to remove the title attribute and place it and the html inside the anchor.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <style type="text/css">
    .tooltip {
    	display:inline-block;
    	position:relative
    }
    .tooltip:hover { text-decoration:none }
    .tooltip span {
    	bottom:18px;
    	margin:auto;
    	position:absolute;
    	display:block;
    	z-index:98;
    	text-align:center;
    	left:100%;
    	margin-left:-50%
    }
    .tooltip b {
    	background:#111;
    	background:rgba(0,0,0,.8);
    	border-radius:5px;
    	color:#fff;
    	display:none;
    	margin:auto;
    	padding:5px 15px;
    	white-space:nowrap;
    	z-index:98;
    	text-align:center;
    	position:relative;
    	left:-50%;
    }
    .tooltip:hover b { display:inline-block;}
    .tooltip:hover b:before {
    	border:solid;
    	border-color:#111 transparent;
    	border-width:6px 6px 0 6px;
    	bottom:-6px;
    	content:"";
    	display:block;
    	left:50%;
    	margin-left:-3px;
    	position:absolute;
    	z-index:99
    }
    </style>
    </head>
    
    <body>
    <h1>IE7+ only</h1>
    <div class="outer">
    		<p>This is some text to testing <a href="#" title="Sample tooltip with much longer text" class="tooltip"> A link </a> and some more text and some more text and some more text and some <a href="#" title="Sample tooltip" class="tooltip">Link</a> more text and some more text and some more text text and some more text and some <a href="#" title="Tooltext" class="tooltip"> link text</a> more text and some more text and some more text</p>
    </div>
    <script type="text/javascript">
    $('.tooltip').each(function() {
    $(this).append('<span><b>' + $(this).attr("title") + '</b></span>').removeAttr("title");
    });
    </script>
    
    </body>
    </html>
    The jquery version should work in IE7 with no problem also.

    If you wanted to use your original version using a width then just swap the title attribute text into a data attribute (html5) and remove the tooltip.

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Oh man. My mistake. I wasn't looking correctly or testing apparently The browser doesn't use the default title on the "i" or "b" because its an empty tag. Ok then the title one can be used. Duh. Wow so many methods to choose from. I'm like a kid at a candy store - I cant decide. 1) could just put a width on it - simple and easy. 2) Put it in the span tag. 3) put it in the title of an empty element. 4) or drsden, or Pauls produces horizontal scroll bars ones. 5) or the jquery method Paul just posted. Hmmm? I'll have to think on this. What do you think?

    PS... nice js help method Paul. The JS'ers in the js forum even said it wasnt possible http://www.sitepoint.com/forums/show...-using-tooltip.

    ...also. Paul testing here. I see scrollbars on both. You guys are just saying if it goes wider than the viewport there are horizontal scroll bars right? I see that on both. What am I missing?

    And what do you think... do search engines see the generated html or the non generated?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I'd do it like I said above but re-instate the original routine width a width for when js was disabled and therefore just enhance with js.

    e.g.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <style type="text/css">
    .tooltip {
    	display:inline-block;
    	position:relative
    }
    .tooltip:hover { text-decoration:none }
    .tooltip span {
    	bottom:18px;
    	margin:auto;
    	position:absolute;
    	display:block;
    	z-index:98;
    	text-align:center;
    	left:100%;
    	margin-left:-50%
    }
    .tooltip b {
    	background:#111;
    	background:rgba(0,0,0,.8);
    	border-radius:5px;
    	color:#fff;
    	display:none;
    	margin:auto;
    	padding:5px 15px;
    	white-space:nowrap;
    	z-index:98;
    	text-align:center;
    	position:relative;
    	left:-50%;
    }
    .tooltip:hover b { display:inline-block; }
    .tooltip:hover b:before {
    	border:solid;
    	border-color:#111 transparent;
    	border-width:6px 6px 0 6px;
    	bottom:-6px;
    	content:"";
    	display:block;
    	left:50%;
    	margin-left:-3px;
    	position:absolute;
    	z-index:99
    }
    /* when js is off */
    
    .jsoff:hover:after {
    	background:#111;
    	background:rgba(0,0,0,.8);
    	border-radius:5px;
    	bottom:18px;
    	color:#fff;
    	content:attr(title);
    	display:block;
    	left:50%;
    	width:10em;
    	margin-left:-5em;
    	padding:5px 15px;
    	position:absolute;
    	z-index:98;
    	text-align:center;
    }
    .jsoff:hover:before {
    	border:solid;
    	border-color:#111 transparent;
    	border-width:6px 6px 0 6px;
    	bottom:12px;
    	content:"";
    	display:block;
    	left:50%;
    	margin-left:-3px;
    	position:absolute;
    	z-index:99
    }
    </style>
    </head>
    
    <body>
    <h1>IE7+ only</h1>
    <div class="outer">
    		<p>This is some text to testing <a href="#" title="Sample tooltip with much longer text" class="tooltip jsoff"> A link </a> and some more text and some more text and some more text and some <a href="#" title="Sample tooltip" class="tooltip jsoff">Link</a> more text and some more text and some more text text and some more text and some <a href="#" title="Tooltext" class="tooltip jsoff"> link text</a> more text and some more text and some more text</p>
    </div>
    <script type="text/javascript">
    $('.tooltip').each(function() {
    $(this).append('<span><b>' + $(this).attr("title") + '</b></span>').removeAttr("title").removeClass('jsoff');
    });
    </script>
    </body>
    </html>
    If you don't want to use jquery then I'm sure the other Paul in the JS forum could convert that snippet into vanilla js for you.

  13. #13
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    dresden. Actually you do get the default title if you hover over the tooltip popup. Probably a non issue just noticed. Pauls dont seem to do that.

  14. #14
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    cool. Paul did you miss my edits in my above post. The 2 questions.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    ..also. Paul testing here. I see scrollbars on both. You guys are just saying if it goes wider than the viewport there are horizontal scroll bars right? I see that on both. What am I missing?
    You will only get scrollbars on mine when the tooltip is near the edge of the right window. I don't see a way to stop that without using overflow:hidden on a parent. (Note that Rays method only works for tooltips that are shorter than the link that triggers it - at least that's what I saw when i tested earlier.)

    And what do you think... do search engines see the generated html or the non generated?
    They shouldn't see any of the generated content so my last method should be best for all users.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If you wanted to just hide the tooltip (using your original method but with a width) then you could swap the text from the title attribute into a data attribute (html5) with one lijne of jquery.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <style type="text/css">
    .tooltip {
    	display:inline-block;
    	position:relative
    }
    .tooltip:hover { text-decoration:none }
    /* when js is off */
    .tooltip:hover:after {
    	background:#111;
    	background:rgba(0,0,0,.8);
    	border-radius:5px;
    	bottom:18px;
    	color:#fff;
    	content:attr(data);
    	display:block;
    	left:50%;
    	width:10em;
    	margin-left:-5em;
    	padding:5px 15px;
    	position:absolute;
    	z-index:98;
    	text-align:center;
    }
    .jsoff:hover:after { content:attr(title); }
    .tooltip:hover:before {
    	border:solid;
    	border-color:#111 transparent;
    	border-width:6px 6px 0 6px;
    	bottom:12px;
    	content:"";
    	display:block;
    	left:50%;
    	margin-left:-3px;
    	position:absolute;
    	z-index:99
    }
    </style>
    </head>
    
    <body>
    <h1>IE7+ only</h1>
    <div class="outer">
    		<p>This is some text to testing <a href="#" title="Sample tooltip with much longer text" class="tooltip jsoff"> A link </a> and some more text and some more text and some more text and some <a href="#" title="Sample tooltip" class="tooltip jsoff">Link</a> more text and some more text and some more text text and some more text and some <a href="#" title="Tooltext" class="tooltip jsoff"> link text</a> more text and some more text and some more text</p>
    </div>
    <script type="text/javascript">
    $('.tooltip').each(function() {
    $(this).attr("data", $(this).attr("title")).removeAttr("title").removeClass('jsoff');
    });
    </script>
    </body>
    </html>

  17. #17
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    arg. What am I missing? I'm trying to add css3 transitions. Its not working. Which ever rule on whichever rule. Im using this one... As a side note this works in ie7 out of the box. No extra hacks needed it seems.

    Im just grabing some code here http://css3generator.com/

    -webkit-transition: background 1000ms ease;
    -moz-transition: background 1000ms ease;
    -ms-transition: background 1000ms ease;
    -o-transition: background 1000ms ease;
    transition: background 1000ms ease;

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .tooltip {
    	display:inline-block;
    	position:relative;
    }
    .tooltip:hover { text-decoration:none }
    .tooltip span {
    	bottom:24px;
    	margin:auto;
    	position:absolute;
    	display:block;
    	z-index:98;
    	text-align:center;
    	left:100%;
    	margin-left:-50%;
    }
    .tooltip b {
    	background:#111;
    	background:rgba(0,0,0,.8);
    	border-radius:5px;
    	color:#fff;
    	display:none;
    	margin:auto;
    	padding:5px 15px;
    	white-space:nowrap;
    	z-index:98;
    	text-align:center;
    	position:relative;
    	left:-50%;
    }
    .tooltip:hover b { display:inline-block;}
    .tooltip:hover b:before {
    	border:solid;
    	border-color:#111 transparent;
    	border-width:6px 6px 0 6px;
    	bottom:-6px;
    	content:"";
    	display:block;
    	left:50%;
    	margin-left:-8px;
    	position:absolute;
    	z-index:99;
    }
    </style>
    </head>
    
    <body>
    <h1>IE7+ only</h1>
    <div class="outer">
    		<p>This is some text to testing <a href="#" class="tooltip"> A link <span><b> Sample tooltip with much longer text</b></span></a> and some more text and some more text and some more text and some <a href="#" class="tooltip">Link <span><b>longer text</b></span></a> more text and some more text and some more text text and some more text and some <a href="#" class="tooltip">link text <span><b> Sample tooltip with much longer text</b></span></a> more text and some more text and some more text</p>
    </div>
    
    </body>
    </html>

  18. #18
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Also. Why does it need the margin left -8px to center? I'm having trouble visualizing this code. Is it because of the padding or borders? Basically what is that negative margin eating up. Thank you!

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Eric,

    you can't really do transitions on display:none but rather on some other change in appearance. You can set the elements opacity to zero and then raise it on hover to get a fade effect bit you will need to move the element out of the way rather than using display:none.

    The margin-left:-8ps should be margin-left:-6px because that would be half the width of the 12 border arrow. Left:50% moves the left edge of the border by 50% so to centre it you also need to move it by half it's width.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .tooltip {
    	display:inline-block;
    	position:relative;
    }
    .tooltip:hover { text-decoration:none }
    .tooltip span {
    	bottom:24px;
    	margin:auto;
    	position:absolute;
    	display:block;
    	z-index:98;
    	text-align:center;
    	left:-999em;
    	margin-left:-50%;
    }
    .tooltip:hover span{left:100%} 
    .tooltip b {
    	background:#111;
    	background:rgba(0,0,0,0.0);
    	border-radius:5px;
    	color:#fff;
    	display:inline-block;
    	margin:auto;
    	padding:5px 15px;
    	white-space:nowrap;
    	z-index:98;
    	text-align:center;
    	position:relative;
    	left:-50%;
    		-webkit-transition: all 1000ms ease;
    	-moz-transition: all 100ms ease;
    	-ms-transition: all 1000ms ease;
    	-o-transition: all 1000ms ease;
    	transition: all 1000ms ease;
    }
    .tooltip:hover b {
    		background:rgba(0,0,0,.8);
    }
    .tooltip:hover b:before {
    	border:solid;
    	border-color:#111 transparent;
    	border-width:6px 6px 0 6px;
    	bottom:-6px;
    	content:"";
    	display:block;
    	left:50%;
    	margin-left:-6px;
    	position:absolute;
    	z-index:99;
    }
    </style>
    </head>
    
    <body>
    <h1>IE7+ only</h1>
    <div class="outer">
    		<p>This is some text to testing <a href="#" class="tooltip"> A link <span><b> Sample tooltip with much longer text</b></span></a> and some more text and some more text and some more text and some <a href="#" class="tooltip">Link <span><b>longer text</b></span></a> more text and some more text and some more text text and some more text and some <a href="#" class="tooltip">link text <span><b> Sample tooltip with much longer text</b></span></a> more text and some more text and some more text</p>
    </div>
    
    </body>
    </html>

  20. #20
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    unless I'm mistaken the tooltip doesn't center if the tooltip is longer than the link text it sits in. It just starts from the left of the link.
    It's not a bug, it's a feature! to' fix' this remove the white-space:nowrap; declaration from my code. At which point i would recomend that you have the tooltip appear below the link rather than above, or use neg margins on the :before pseudo element (eg.: margin:0 -100%) to give it horizontal breathing room.

    Eric.. Ah I see what you mean, the title does show as a tool tip tool tip..lol.

    OK , well minor tweak then.. IF PAUL hasn't suggested this yet ( am prepping for Samhain so am distracted) :

    tool i:before { content"";} /* THIS IS OPTIONAL!!!*/

    tool i:before { content:"";}
    1) select ALL .tooltips
    2) store the attr in a variable
    3) select each tool tip's <I>'s, $(this, 'i') in jQ, and set that TEXT() to the value in the variable.
    4) then set that sames tooltip's tittle attribute to ='' ( which essentially removes it!)

    ADVANTAGES:
    1) your title remains in the A tag, for when everything is off
    2) if they dont have js on.. well minor drawback thatthey see the default title...:/
    3) if they have j/s & CSS then everything works 100%!

  21. #21
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Awesome thanks again guys! For anyone reading this in the future. If you want the triangle to go semi-transparent to then it seems you have to use opacity instead of rgba

  22. #22
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Also, if you are using a different hide method. Like opacity. Then you may find the tooltip pops up if you hover over the tooltip too. For supported browsers you could add pointer-events: none to span selector to prevent that. I'm trying to move the hide to just opacity so I can have animation on the way in and the way out. like this one http://tympanus.net/TipsTricks/CSS3Tooltips/. Hers works in ie8 too. Havnt found in her code yet how though. Because it doesnt in her downloaded files.

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    Also, if you are using a different hide method. Like opacity. Then you may find the tooltip pops up if you hover over the tooltip too. For supported browsers you could add pointer-events: none to span selector to prevent that. I'm trying to move the hide to just opacity so I can have animation on the way in and the way out. like this one http://tympanus.net/TipsTricks/CSS3Tooltips/.
    You could use a negative z-index like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .tooltip {
    	display:inline-block;
    	position:relative;
    }
    .tooltip:hover { text-decoration:none }
    .tooltip span {
    	bottom:24px;
    	margin:auto;
    	position:absolute;
    	display:block;
    	z-index:98;
    	text-align:center;
    	left:100%;
    	margin-left:-50%;
    	z-index:-1;
    }
    .tooltip b {
    	background:#111;
    	opacity:0;
    	background:rgba(0,0,0,.8);
    	border-radius:5px;
    	color:#fff;
    	display:inline-block;
    	margin:auto;
    	padding:5px 15px;
    	white-space:nowrap;
    	z-index:98;
    	text-align:center;
    	position:relative;
    	left:-50%;
    	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-ms-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	transition: all 1s ease;
    }
    .tooltip b:before {
    	opacity:0;
    	border:solid;
    	border-color:#111 transparent;
    	border-width:6px 6px 0 6px;
    	bottom:-6px;
    	content:"";
    	display:block;
    	left:50%;
    	margin-left:-6px;
    	position:absolute;
    	z-index:99;
    	-webkit-transition: all 1s ease;
    	-moz-transition: all 1s ease;
    	-ms-transition: all 1s ease;
    	-o-transition: all 1s ease;
    	transition: all 1s ease;
    }
    .tooltip:hover span { z-index:1; }
    .tooltip:hover b { opacity:1.0 }
    .tooltip:hover b:before { opacity:1.0 }
    </style>
    </head>
    
    <body>
    <h1>Tooltip test</h1>
    <div class="outer">
    		<p>This is some text to testing <a href="#" class="tooltip"> A link <span><b> Sample tooltip with much longer text</b></span></a> and some more text and some more text and some more text and some <a href="#" class="tooltip">Link <span><b>longer text</b></span></a> more text and some more text and some more text text and some more text and some <a href="#" class="tooltip">link text <span><b> Sample tooltip with much longer text</b></span></a> more text and some more text and some more text</p>
    </div>
    </body>
    </html>
    That fades in and out nicely but you would have to add the alpha filter for ie8 instead of opacity of course.

    [code]
    Hers works in ie8 too. Havnt found in her code yet how though. Because it doesnt in her downloaded files.[/QUOTE]

    The popup shows in ie8 but the transitions don't work .

  24. #24
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    another nice one Paul. The z-index works well. However, I'm trying to have animation to. Drops down from above. The zindex works it just pops out fast instead of up and fade out. Works in modern fine. But ie was killing me with its lack of pointer-events:none;. I dont like those things poping up when they are not suposed to. I came up with his css hack for ie.

    <div id="overlay"></div>

    #overlay {
    position:absolute;
    top:-79px;
    left:-60px;
    height:80px;
    width:380px;
    z-index:2;
    background:url(fake.gif);
    }

    Works perfect.

  25. #25
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I'm still pluging away at this. While the overlay works to prevent IE from popping up the tooltip when you hover over the tooltip (not the link area) its messy. Extra code and can block other things that you don't want blocked. A simple almost fix is to simply add .tooltip span:hover {visibility:hidden;}. Or some other form of hidding. But I have a couple little things I can't figure out with this.

    As I expected the mouse does that flicker on and off thing as the span goes from gone to back. The span remains hidden regardless of hiding method. But the mouse flickers the same with all of them. Problem 1) My ShareThis link still sees the span even though I said be gone and so it pops up the ShareThis box when I'm hovering over the span. Problem 2) I can't seem to prevent the cursor from flickering back and forth from pointer to default/arrow. Cursor:default has no effect it seems.

    So if any one could think of any cool hiding tricks that I couldn't think of that would be awesome. Or ones that IE likes more. Thanks!


Bookmarks

Posting Permissions

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