1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

[data-tooltip] and ease-in-out

Discussion in 'CSS' started by qwikad.com, Nov 10, 2016.

0
  1. #1
    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):

     
    Solved! View solution.
    qwikad.com, Nov 10, 2016 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    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
     
    kk5st, Nov 11, 2016 IP
  3. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #3
    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.
     
    qwikad.com, Nov 11, 2016 IP
  4. #4
    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
     
    denis bayly, Nov 11, 2016 IP
    kk5st likes this.
  5. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #5


    Makes sense. Nicely done!​
     
    qwikad.com, Nov 11, 2016 IP
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #6
    qwikad.com, Nov 11, 2016 IP
  7. denis bayly

    denis bayly Well-Known Member

    Messages:
    104
    Likes Received:
    28
    Best Answers:
    6
    Trophy Points:
    105
    #7

    No problem, you're very welcome. ;)
    ​

    coothead
     
    denis bayly, Nov 11, 2016 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #8
    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.
     
    deathshadow, Dec 1, 2016 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    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.
     
    deathshadow, Dec 1, 2016 IP
  10. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #10
    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;
     
    qwikad.com, Dec 1, 2016 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #11
    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.
     
    deathshadow, Dec 2, 2016 IP
    qwikad.com likes this.
  12. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #12
    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.
     
    alfieindesigns, Aug 15, 2017 IP