To me, this looks similar to the Add <abbr> tags to words in posts component. I noticed that this component doesn’t use the <abbr> HTML tag, like Hover me (<abbr title="Text shown on hover">Hover me</abbr>), which made me curious about the design choice.
From my understanding, one advantage of using <abbr> is that the information remains available even if the component is removed later. I think with the current approach, the span would become invisible in that case. I’d love to understand what advantages this approach has and am hoping to learn something new.