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
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.
You could use a negative z-index like this:
<!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.
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 .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.
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!
Do you have your full code Eric so we can see what effect you are going for?
Sure thanks for looking Paul! I stripped it down so the overlay is probably not lining up anymore but you get the idea. I feel bad to show you. After all your awesome code it looks like I’m going with the fixed width version. Mainly because I couldnt fully understand yours enough to edit appropriately and I coldnt get the fluid versions to do everything I wanted - aside form being perfectly fluid that is.
So to recap I’m just trying to get IE to stop popping up the tooltip when you hover “above” the “TOOLTIP” link in the demo page. I only want the tooltip to pop up when you over directly over the TOOLTIP link. And secondly I want to keep IE’s cursor at default arrow. And no flickering to pointer.
As a side note. Another possible fix I thought of is to add in a jquery hover delay to the span. Like 30 second delay. But I cant seem to get that working either. And ofcourse a full CSS solution is preferd. And this falls back perfect for IE. It has everything except the animation, opacity, and shadow. IE is over half my visitors
Test Page
http://www.visibilityinherit.com/projects/showsitepoint.html
oops sorry - use this one! http://www.visibilityinherit.com/projects/showsitepoint.html. This has the AddToAny popup in it so you can see that it still pops up in IE when hovered over wrong area. And no overlay. Just display none. Also I figured out the cursor. Just needs to go on the span. Not span:hover. I really am rusty. So I just have the one AddToAny problem left.
Hi Eric,
You could just fork the code for IE as it doesn’t have the transition effect.
e.g.
<!--[if lte IE 9]>
<style type="text/css">
.tooltip span { display:none; }
.tooltip:hover span { display:block; }
</style>
<![endif]-->
ya I refuse. I hate having those in my html. It’s a sign of failer for me.
What no super-duper Paul OB code?
What was wrong with the visibility:hidden method as that seems to work for me?
.tooltip span{visibility:hidden}
.tooltip:hover span{visibility:visible}
Awesome! I’m glad I asked about the super duper code. That worked perfect. For some reason I just kept adding hidden to the hover event and not to the span at default. Man I need to hit the books. Lol. All the problems have been worked out. I even worked out the fact that ie clips the arrow off with the opacity filter in place. I found some obscure filter rule to turn it off on hover. Thanks Paul I am happy.
Cool now I can get ride of the opacity filter probably and use pie.css. Pie didn’t work with the opacity filter in place.
Here is my final product with this tooltip http://www.visibilityinherit.com/code/pure-css3-animated-tooltip-cross-browser.php. What do you think?
Looks very slick Eric -good job.
Thnaks Paul. So I figured out a alludingly simple way to simulate hover on touch devices (at least apple). Although I’m using media queries and have a couple questions about them because I have no experience with them. I’m using this to make ipad/iphone hover…
@media only screen and (min-device-width:768px) and (max-device-width:1024px) {.tooltip span{display:none;}.tooltip:hover span{display:block;} } /* iPad */
@media only screen and (max-device-width:480px) { .tooltip span{display:none;}.tooltip:hover span{display:block;} } /* iPhone */
The Question? So do media queries target devices by screen size? So is this correct? What if another say Android device is the same screen width - won’t it be targeted to? I put the rules in my demo above so you can see in action if you have apple device.
Edit: That sucks, I just noticed firefox is 1px different on the bottom triangle (FYI triangle white border) than webkit/opera/ie.
The device-width media queries target the actual resolution of the device while min/max-width media queries refer to the viewing area.
Yes if a device understand the media query then it will apply the styles within if they match.
It’s funny the entire web seemed to of just copied one single sorce of information on those things. Reading on them all morning and I havnt learned anything. So if I understand you correctly I should use the min and max width to target specific size devices? Anyone know of a specific apple IOS css hack or other? I’m fairly certain android will hover and do he animation. So I don’t want to feed it the same rules as iPhone/iPad.
No the best approach is to be device independent as you never know what size a device will be next. Take the ipad and ipad mini for example. They just appeared out of the blue.
Layouts should be device independent and scale through the whole range. You just set the media queries at the point that your layout no longer works any more. Forget about devices just allow the screen to go really small and really big. All layouts are different and the point where a media query needs to work is different every time.
Anyone know of a specific apple IOS css hack or other? I’m fairly certain android will hover and do he animation. So I don’t want to feed it the same rules as iPhone/iPad.
Well you could sniff it with JS but I wouldn’t rely on hacks as mobiles have started reading each others vendor specific rules. there is the webkit hack but I don’t think it will always remain safe.
Hover doesn’t exist on mobiles but usually a menu will open when touched if its a link but the problem is making it go away again. You usually have to set up another link to close it or make the user touch somewhere else. Hover effects should really be avoided for mobiles or at least not be essential to the use of the site.
It’s a bit of conundrum really.
Ya I can’t sniff out WebKit because I only want iOS. Here is a simple demo I just made showing hover on iOS with css only. http://www.visibilityinherit.com/code/apple-iPhone-iPad-IOS-simulate-hover-demo.php.
In my situation I can’t use the display none - display block rutine needed for the iOS hover because it kills my animation. So I’m just looking for a way to target iOS. Anybody know if Android devices do hover? If not, does the hover in the demo above work on your android device?