CSS tooltip: how to auto center over element?

**PicnicTutorials** · Oct 25, 2012 18:34

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
}

**PicnicTutorials** · Oct 26, 2012 11:43

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.

**Paul O'B** · Oct 26, 2012 13:07

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>

**PicnicTutorials** · Oct 26, 2012 13:22

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.

**Paul O'B** · Oct 26, 2012 15:08

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 )

**PicnicTutorials** · Oct 26, 2012 15:22

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...

**dresden_phoenix** · Oct 27, 2012 00:25

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.

**PicnicTutorials** · Oct 27, 2012 01:28

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.

**dresden_phoenix** · Oct 27, 2012 02:22

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!)

**Paul O'B** · Oct 27, 2012 03:22

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.

**PicnicTutorials** · Oct 27, 2012 05:37

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?

**Paul O'B** · Oct 27, 2012 06:14

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.

**PicnicTutorials** · Oct 27, 2012 06:14

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.

**PicnicTutorials** · Oct 27, 2012 06:18

cool. Paul did you miss my edits in my above post. The 2 questions.

**Paul O'B** · Oct 27, 2012 07:07

..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.

**Paul O'B** · Oct 27, 2012 07:34

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>

**PicnicTutorials** · Oct 27, 2012 10:24

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>

**PicnicTutorials** · Oct 27, 2012 10:39

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!

**Paul O'B** · Oct 27, 2012 13:04

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>

**dresden_phoenix** · Oct 27, 2012 14:36

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%!

**PicnicTutorials** · Oct 28, 2012 04:27

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

**PicnicTutorials** · Oct 28, 2012 08:43

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.

**Paul O'B** · Oct 28, 2012 16:37

Originally Posted by EricWatson

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 .

**PicnicTutorials** · Oct 29, 2012 11:03

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.

**PicnicTutorials** · Oct 29, 2012 20:39

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!

User Tag List

Thread: CSS tooltip: how to auto center over element?

Thread Tools

Display

CSS tooltip: how to auto center over element?

Bookmarks

Bookmarks

Posting Permissions