Social Tooltips' Z-Index

  • Resolved Loni2Shoes

    (@loni2shoes)


    10 years, 2 months ago

    Love this theme! Definitely one of the most cleanly put together themes I’ve used.

    I have what I hope is a tiny problem. I had to add a background color to my #nav-header.nav-container DIV because I added a background image behind it and couldn’t allow for it to be transparent any more. However, this causes it to obscure the tooltips that appear when you mouse over the social icons at the top of my sidebar (z-index issues, undoubtedly). Setting the z-index of my #nav-header.nav-container to 1 fixes the tooltip issue but understandably breaks the dropdown menus’ ability to appear over the rest of the content. Can you tell me the selector for the tooltip itself to modify? (Modifying the z-index of .social-tooltip appears to have no effect.) Alternately, is there a way I could force those tooltips to change direction, say downwards instead of upwards?

    Site preview: https://villagesofwestpearland.com

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi Loni,
    interesting problem, right CSS class (or pseudo class) for tooltip “balloon” is .social-links .social-tooltip:hover:after
    For example:

    .social-links .social-tooltip:hover:after { color:red;}

    will change “balloon’s” text color to red.
    Default values are in Hueman style.css line 403 (or very near).
    As I see you are pretty good with CSS, I’ll leave to you rest of modifications, since you know the best what you want to achieve.
    If you have any further questions, don’t hesitate to ask.
    If not, post the solution (for others to learn something ?? and please mark thread [resolved].
    Regards,
    Mike

    Thread Starter Loni2Shoes

    (@loni2shoes)

    Thank you very much for your help! Knowing to look at the :hover:after pseudo-classes was very helpful.

    I looked up some tutorials on z-index (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index) but worried about the difficulty of tracking down my stacking-context. I ended up solving the problem by switching the tooltip’s orientation from up to down by applying these overrides:

    .social-links .social-tooltip:hover:after {
    top: auto; /* reset the original value */
    bottom: -36px; /* change the value to bottom-based position */
}
.social-links .social-tooltip:hover:before {
    top: auto;
    bottom: -10px;
    border-width: 0 5px 5px 5px; /* "rotate" the triangle */
}

    I may revisit the z-index issue if my design changes in a way that makes this “fix” untenable but, for now, it works for me!

    Thanks again for such a lovely theme!

    You’re welcome.
    I’d like it’s my theme (alas, no!) but it’s really lovely ??
    I see you made a nice CSS solution that suits you, great.
    Mike

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Social Tooltips' Z-Index’ is closed to new replies.

Tags