CSS tooltip content goes under triangle with animation opacity and translate

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!

You are wanting the “hello hello hello” to stop above the upside down triangle?

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!

From where are you wanting the animation to start? Currently, it starts above the upside down triangle. Where (location in relation to the “hover to see” text) are you wanting the “hello hello hello” to first appear in the animation sequence?




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!

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

1 Like

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

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

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!

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

2 Likes

Thank you sooooooooooo much!!!

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