Show truncated text by hovering only on ellipsis

[RomanP]

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?

[Pogany]

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.

[Paulie_D]

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

[RomanP]

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.

[Author]

Posts