Render metadata above text with css

user_1156245 0
Viewed 145

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"):

enter image description here

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.

css html
3 Answers

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

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.

user_106680520

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: Bootstrap 4 approach

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

Good luck.

user_39295250
Related