- This topic is empty.
-
AuthorPosts
-
May 4, 2018 at 3:57 pm #270665
RomanP
Participanthttps://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?
May 5, 2018 at 7:52 am #270679Pogany
ParticipantI’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.
May 5, 2018 at 11:23 am #270683Paulie_D
ModeratorYou 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. :)
May 6, 2018 at 8:05 am #270694RomanP
ParticipantThanks 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. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.