Tooltip Issue

[mintertweed]

Here is the site in question. If you scroll down to the bottom where the social network icons are and roll over them, everything works the way it should. But if you roll over the same icons a second time, the tooltip appears broken. I know it probably has something to do with my CSS, but I can’t figure out why it works at first and then it becomes broken. Here is my CSS for the tooltip portion:

.tooltip {
    position: relative; /* make span relative to anchor */
    text-decoration: none; /* no underline */
    cursor: pointer; /* make cursor point */
}

.tooltip span { /* tooltip */
    position: absolute;
    width: 100px;
    height: 16px;
    padding: 10px;
    text-align: center;
    color: #464646;
    background: #D7D7D7;
    bottom: 59px; /* fade in/out begin */
    left: 50%; /* center tooltip */
    margin-left: -60px; /* center tooltip */
    opacity: 0; /* hide tooltip in modern browsers */
    visibility: hidden; /* hide tooltip in IE */
    font-family: 'Open Sans', sans-serif; /* font */
    font-size: 1em;
    pointer-events: none; /* no unintended tooltip popup for modern browsers */
    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 */
}

.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 */
}

.tooltip:hover span { /* reveal tooltip */
    opacity: 1; /* reveal tooltip in modern browsers */
    bottom: 37px; /* fade in/out end */
    visibility: visible; /* reveal tooltip in IE */
}

.tooltip span:hover {
    visibility: hidden; /* hide tooltip when moving from link to span in IE */
}

It’s rather simple as you can see. Any and all suggestions will be greatly appreciated.

[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.

[Author]

Posts