Reply To: Tooltip Issue

[GSimon]

Looks like it might just be a timing issue.

You probably need to also apply the transitions to the :after and :before properties also. That’s why the arrow is showing up before the box for the tooltip, because the arrow has 0 delay whereas the box has 0.3s easing.

.tooltip span:before, .tooltip span:after { /* arrow */
content: ''; /* add html content */
position: absolute;
bottom: -10px; /* position arrow */
left: 50%; /* center arrow */
margin-left: -10px; /* center arrow */
border-left: 10px solid transparent; /* build arrow */
border-right: 10px solid transparent; /* build arrow */
border-top: 10px solid #D7D7D7; /* build arrow */
transition: all 0.3s ease-in-out; /* animate tooltip */
-webkit-transition: all 0.3s ease-in-out; /* animate tooltip */
-moz-transition: all 0.3s ease-in-out; /* animate tooltip */
-o-transition: all 0.3s ease-in-out; /* animate tooltip */
-ms-transition: all 0.3s ease-in-out; /* animate tooltip */
}

^ that could work.