Render metadata above text with css

Question

Given text that is tagged with parts of speech classifications, I wonder if there's there any way to visualise this metadata using css? For example the sentence Ten pins were set in order. parses (in Spacy) as:

  token pos  
1 Ten   NUM  
2 pins  NOUN 
3 were  AUX  
4 set   VERB 
5 in    ADP  
6 order NOUN 
7 .     PUNCT

I can render this in html as e.g:

<p>
  <span style="color:green" title="NUM">Ten</span> 
  <span style="color:red" title="NOUN">pins</span> 
  <span style="color:purple" title="AUX">were</span> 
  <span style="color:skyblue" title="VERB">set</span> 
  <span style="color:orange" title="ADP">in</span>
  <span style="color:red" title="NOUN">order</span> 
  <span style="color:navy" title="PUNCT">.</span> 
</p>

Which looks like this (note use of title attribute demonstrated by the (invisible) mouseover on "pins"):

This requires interactivity to explore the metadata. I wonder if there is any css way to render all of the tags' title/other attributes permanently visible? Preferably the details would render offset above or below the word.

Answer 1

Use css pseudo elements:

span:before {
  content: attr(title); /* Put the value of the title attribute as text */
  position: absolute;
  transform: translate(offsetX, offsetY); /* find the correct offset here */
}

Answer 2

You can use data attribute. E.g.:

p {
  position: relative;
}

p::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 70px;
  top: 0;
  color: #000;
}

<p style="color:green" data-tooltip="NUM">Ten</p>
<p style="color:red" data-tooltip="NOUN">pins</p>
<p style="color:purple" data-tooltip="AUX">were</p>
<p style="color:skyblue" data-tooltip="VERB">set</p>
<p style="color:orange" data-tooltip="ADP">in</p>
<p style="color:red" data-tooltip="NOUN">order</p>
<p style="color:navy" data-tooltip="PUNCT">.</p>

Here I've used p tag to put words into a column, in order to avoid overlapping.