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.

Pseudo elements that use [`attr()`](https://developer.mozilla.org/en-US/docs/Web/CSS/attr) to access the value of an attribute of the element … — CBroe, Sep 08 '20 at 09:17
(You’re likely gonna have problems with overlapping content though, with that kind of data. You would have to format the pseudo element content so small, that it won’t exceed the length of the actual word.) — CBroe, Sep 08 '20 at 09:19

score 6 · Accepted Answer · answered Sep 08 '20 at 09:19

6

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 */
}

answered Sep 08 '20 at 09:19

Oskar Zanota

472
3
12

score 1 · Answer 2 · answered Sep 08 '20 at 09:37

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.

score 1 · Answer 3 · answered Sep 08 '20 at 09:41

Another approach to solve this which may look more beautifully in some cases is to use Bootstrap 4 tooltips and a piece of jQuery code to make the tooltips appear automatically without needing mouse hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Bootstrap Approach</h3>
  <br>
  <br>
  <p>
  <span style="color:green" data-toggle="tooltip" data-placement="top" title="NUM">Ten</span> 
  <span style="color:red" data-toggle="tooltip" data-placement="bottom"title="NOUN">pins</span> 
  <span style="color:purple"data-toggle="tooltip" data-placement="top" title="AUX">were</span> 
  <span style="color:skyblue" data-toggle="tooltip" data-placement="bottom"title="VERB">set</span> 
  <span style="color:orange" data-toggle="tooltip" data-placement="top"title="ADP">in</span>
  <span style="color:red" data-toggle="tooltip" data-placement="bottom"title="NOUN">order</span> 
  <span style="color:navy"data-toggle="tooltip" data-placement="top" title="PUNCT">.</span> 
</p>
</div>

<script>
$(document).ready(function(){
  $('span').tooltip('show');  
});
</script>

</body>
</html>

You can see how it is going to look like in this image:

Also if you want to change the color of tooltips you can do it by following the steps mentioned in this question.

Good luck.

Thanks Naser. My requirement is css but I can definitely see the value of this approach. — geotheory, Sep 08 '20 at 14:26

Render metadata above text with css

3 Answers3