CSS tooltip content goes under triangle with animation opacity and translate

HTML-CSS
1

https://jsfiddle.net/t3d9z50u/

My problem the hello hello hello message goes under arrow and its looks bad. How can make animation goes down with translate from keyframes but content stay top on arrow?

Thank you!

3

You are right. I try change settings many times but not really got that to work! So content under it triangle. And work with keyframe animation is goes down smooth. Thanks!

5




If remove the animation part with @keyframes and animation property then is display good. You see hello hello hello under it triangle. I want same order with keyframes animation from opacity 0 to 1 and translate (goes down effect)? If set it to back is goes under it like on above example. Any idea?

Thank you!

6

Like this?
https://jsfiddle.net/dsqtb2L5/

1 Like
7

You are a pro! The miss part is top: -40px; right?

8

No problem, yes I added the top: -40px;

9

Hmm! Is very fine, by the way is fixed value when add more content is a bit break :? What can do with that? Something with calc to get content height minus or how get value depends on content long??

https://jsfiddle.net/xdqmf2b5/

Thanks!

10

I guess bottom 100%; works better.
https://jsfiddle.net/j9ws6v1x/

2 Likes
11

Thank you sooooooooooo much!!!

12

And yes, you are right, using fixed pixel values is rarely a good idea.