Can someone tell me why that ease-in-out transition is being ignored? http://jsfiddle.net/gqnGN/264/ <a href="#" data-tooltip="Link Title" data-tooltip-position="right">LINK</a> <style> [data-tooltip]:before { content: attr(data-tooltip); display: none; position: absolute; background: #000; color: #fff; padding: 2px 2px 2px 2px; font-size: 14px; line-height: 18px; min-width: 68px; text-align: center; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; opacity: 0; } [data-tooltip-position="right"]:before { top: 45px; -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } [data-tooltip-position="right"]:before { left: 45px; margin-left: 6px; } [data-tooltip]:after { content: ''; display: none; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; } [data-tooltip-position="right"]:after { top: 45px; margin-top: -6px; } [data-tooltip-position="right"]:after { left: 45px; border-width: 6px 6px 6px 0; border-right-color: #000; } [data-tooltip]:hover:before, [data-tooltip]:hover:after { display: block; z-index: 100; opacity: 1; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } </style> Code (markup):
Not tested I think you need to style the element, not the attribute. But what do I know; I always leave that at the default. gary
The strange thing is it responds to everything else (position, color, background, z-index and so on) but not ease-in-out. I am sure there's a way, I just don't know how yet.
Hi there qwikad.com, the transition attribute does not work with "display:none" to "display:block" as there is, obviously, no graduation between the two states. So try it like this, instead... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>untitled document</title> <!--<link rel="stylesheet" href="screen.css" media="screen">--> <style media="screen"> body { font: 1em/150% verdana,arial,helvetica,sans-serif; } [data-tooltip]{ position: relative; } [data-tooltip]::before { content: attr(data-tooltip); position: absolute; left: 4em; width: 5.2em; line-height: 1.375em; padding: 0.14em; border-radius: 0.18em; background: #000; font-size: 0.875em; color: #fff; text-align: center; opacity: 0; transition: opacity 0.75s ease-in-out; } [data-tooltip]::after { content: ''; position: absolute; left: 3.1em; width: 0; height: 0; margin-top: 0.375em; border-style: solid; border-width: 0.375em 0.375em 0.375em 0; border-color: transparent; border-right-color: #000; opacity: 0; transition: opacity 0.75s ease-in-out; } [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; } </style> </head> <body> <a href="#" data-tooltip="Link Title">LINK</a> </body> </html> Code (markup): coothead
Now that it makes sense to me I can even re-do my version to do ease-in-out without any major changes: http://jsfiddle.net/gqnGN/276/
You could also use left:-999em; and left:0; if you don't want the opacity fade... you might even want it in addition to it as whilst the opacity left it invisible, it is still there atop the content and due to it being generated content, it will be tricky to convince other elements not to obey it. If you have anchors too close together this triggers it COULD be a problem. If mixing it with the opacity fade, use the transition-delay property to 'hold' the left animation on fade-out.
You might want to study up on using attribute selectors, particularly for custom data- atttributes. They work as he has it -- and that's actually kind-of awesome for extra effects that don't necessarily warrant being "content" in the markup. Though a proper TITLE should be a TITLE attribute, you don't like the default styling, LIVE WITH IT; otherwise you're telling users with accessibility needs to go **** themselves; but that really depends on exactly WHAT this technique is being applied TO.
I actually ended up doing something like: visibility: hidden; opacity: 0; transition: opacity 0.45s ease-in-out; and then the hover part: visibility: visible; opacity: 1;
Like with display:none you'll find two problems; first screen readers/braille readers won't have access to that content (even though they are SUPPOSED to ignore screen media CSS) and spiders might not see it either... second, there's no animation when you de-hover, it just disappears. opacity: 0; left:-999em; transition: opacity 0.45s ease-in-out, left 0s 0.45s; Then for your hovers: left:3.5em; /* or however much it is for each one */ Will in fact work both in and out. Visibility and Display cannot be delayed, but left can. By telling "left' to use a 0s transition and a 0.45s delay, it will hold off on applying it until the opacity transition runs completely. "left" off-screen doesn't get in the way of accessibility as the content is still considered visible/displayed, just as with any normal drop-down menu. ... and yes, you do have to say "0s", not just "0" as Firefox is too stupid to realize that zero is zero when it comes to seconds.
Yes, you were right and to solve this issue you may add z-index: -1; (assuming it's position:relative/absolute) to make sure that element won't be a problem to overlap some element/DOM.