2

I have some minor problems with some CSS pseudo-elements. I am trying to make my custom tooltip, fade in and out, when hovering, but it doesn't seems to work.

The pseudo-element, are getting the content from an data-title HTML5 tag.


I have tried this, without any luck:

span:before, span:after {
   opacity: 0;
   -webkit-transition: all .2s;
   -moz-transition: all .2s;
   -o-transition: all .2s;
   -ms-transition: all .2s;
   transition: all .2s;
}

span:hover:after {
   content: attr(data-title);
   display: block;
   opacity: 1;
   position: absolute;
   width: 100px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: #FFF;
   background: rgba(0,0,0,0.75);
   border-radius: 3px;
   left: -20px;
   top: 46px;
}

The tooltip shows properly, but without the transition. I have also tried to add a content: "" in the span:before, span:after section, without any luck either.


Here's the fiddle: http://jsfiddle.net/nDq9f/3/

Anyone who can help me please?

7
  • When trying that, the buttons are moving up and down. But the animation works. jsfiddle.net/nDq9f/4
    – TheYaXxE
    Jan 8, 2014 at 15:18
  • Don't understood the text in the buttons breaks at the white-spaces. At the margins? Buttons also moving up and down when you hover?
    – fiskolin
    Jan 8, 2014 at 15:22
  • Nothing happens to the text anyway. Now the only problems is, that the buttons are moving up and down, when hovering, and the text in the pseudo-element messes up when you are moving the cursor away from the button. You can see it at the fiddle in my first comment.
    – TheYaXxE
    Jan 8, 2014 at 15:28
  • Let me now if my answer helps you
    – fiskolin
    Jan 8, 2014 at 16:00

2 Answers 2

2

I got i fixed!

I but all the styling (display, width, height etc...) in the span:before, span:after part, instead of in the :hover part. Then it all worked perfect!

You can see the fiddle in the bottom of this post.

span:before, span:after {
   content: attr(data-title);
   display: block;
   position: absolute;
   width: 100px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   color: #FFF;
   background: rgba(0,0,0,0.75);
   border-radius: 3px;
   left: -20px;
   top: 46px;
   opacity: 0;
   -webkit-transition: all .2s;
   -moz-transition: all .2s;
   -o-transition: all .2s;
   -ms-transition: all .2s;
   transition: all .2s;
}

span:hover:after {
   opacity: 1;
}

I also added a pointer-events: none; so you can't make the tooltip appear when hovering it, when it has opacity: 0;

Here's the js Fiddle

1

Try to change this in your span:before, span:after:

span:before, span:after {
    content: attr(title);
    filter: alpha(opacity=00);
    opacity: 0;
    -webkit-transition: opacity .6s ease-in-out;
    -moz-transition: opacity .6s ease-in-out;
    -ms-transition: opacity .6s ease-in-out;
    -o-transition: opacity .6s ease-in-out;
    transition: opacity .6s ease-in-out;
}

NOTE: the content: attr(title); property makes all sense

1
  • You have some errors in your css, like as border-color: transparent transparent rgba(0,0,0,0.75); transparent;... And you doesn't only change my CSS. :P Check this fiddle.
    – fiskolin
    Jan 8, 2014 at 17:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.