Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #270665
    RomanP
    Participant

    https://codepen.io/romanp/pen/bMryRK

    The goal is to have a long piece of text truncated by CSS ellipsis show up in a tooltip only by hovering on the ellipsis (not the full phrase).

    I tried by placing a pseudo element over the ellipsis and hovering over it to trigger visibility of the tooltip. However, it appears impossible to select elements outside the parent of the pseudo element. This does not work:
    h1:hover::after + .tooltip {
    visibility: visible;
    transition: opacity 0.5s ease;
    opacity: 1;
    }

    Any suggestions that don’t involve JS?

    #270679
    Pogany
    Participant

    I’ve made a fork, but I’m not very sure you will like it.

    https://codepen.io/giaco/pen/BxwWyN

    I’m using a span element instead of a pseudo-element, and I’m wrapping everything in an extra div.

    #270683
    Paulie_D
    Moderator

    You can manage this by leveraging pointer-events.

    First we turn off pointer interactions on the h1 but reset them on the pseudo-element.

    Frankly, I didn’t think this would work…but it seems to. :)

    https://codepen.io/Paulie-D/pen/jxGwdq

    #270694
    RomanP
    Participant

    Thanks Paulie_D, that works beautifully.
    So it appears that pointer events such as hover can be limited to an area, which in this case is a pseudo element. Very useful.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.