Utilize CSS to display metadata above the text

Is there a way to visually represent parts of speech data in CSS for text that has been tagged with such classifications? Take the sentence Ten pins were set in order., which, when parsed using Spacy, results in:

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

I can display this information in HTML like so:

<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>

This is how it appears (with the use of the title attribute shown by hovering over "pins"):

https://i.sstatic.net/lNVTd.png

To explore the metadata, interactivity is needed. Is there a CSS method to permanently display all the tags' title or other attributes? Ideally, these details would be offset above or below the word.

htmlcss

Answer №1

Implement css pseudo elements:

span:before {
  content: attr(title); /* Display the title attribute value as text */
  position: absolute;
  transform: translate(offsetX, offsetY); /* Adjust the offset accordingly */
}

Answer №2

One way to prevent overlapping text is by utilizing data attributes, as shown below:

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>

The use of the p tag in this example creates a neat column layout for the words, preventing them from overlapping.

Answer №3

One alternative method to address this issue is by utilizing Bootstrap 4 tooltips along with a dash of jQuery script to trigger the tooltips automatically without relying on 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 preview the visual representation in this snapshot: https://i.sstatic.net/3bNha.png

In addition, if you wish to modify the tooltip colors, refer to the guidelines provided in this thread.

Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The phone number is not able to be clicked on

I have a phone number included in my markup that I would like to make clickable. Here is the code snippet: <h3 class="footer">Need assistance? Call <a href="tel:+180006XXXX">1800 06X XXX</a></h3> However, upon running this code, I ...

htmlcss

Convert JavaScript back into an HTML attribute

Is there a way to include a JavaScript code in an HTML attribute like shown below? <div class="xx" animation="yy" animate-duration="<script>Code goes here<script>" ...> </div> I'm struggling to figure it out, is there a solut ...

javascripthtmlcssattributeselement

The navbar is perfectly aligning all elements to the center

I've been struggling with this navbar for a while now. The latest issue I'm facing is proving to be quite challenging. The problem at hand is getting the navbar centered without affecting the positioning of other elements around it. If you check ...

htmlcssnavbarcenter

How can I transfer array data to a different webpage using JavaScript?

My goal is to use JavaScript to send data from one page to another. This will involve implementing a "next" button with an onClick function. When the button is clicked, I want all the data in the textboxes on the current page to be transferred and displaye ...

javascriptjqueryhtmldom

Can a specific input value be applied or utilized in any way?

I have limited coding experience, so please forgive me if this is a simple question. I am curious if it is possible to create a feature on a website where user input is utilized elsewhere. Specifically, I am looking to have an input box where a user enter ...

javascripthtmlcss

Accessing .js and .css libraries from shared views in ASP.NET Core can be restricted

I am currently developing a simple application on ASP.NET core 3.1, and I'm facing a basic problem that I can't seem to solve. The menu of the application is located in a Shared view called _Layout.cshtml. I load .js and .css libraries in this v ...

cssasp.netviewsrcshared

What could be causing the malfunction of the .setAttribute() and .removeAttribute functions in my JavaScript program?

Below is a flashcard game I have developed: Once a user enters the correct answer in the text box, "Correct!" is expected to be displayed in bold green font. The CSS attributes are then supposed to be removed shortly after. Here is the HTML code for the i ...

javascripthtmlcss

How can jQuery distinguish between implicit and explicit CSS height values?

When working with jQuery, I have noticed that both $('#foo').height() and $('#foo').css('height') will return a value regardless of whether a height property is explicitly set using CSS. Is there a way to determine if an eleme ...

javascriptjqueryhtmlcss

What is the method for writing to an HTML file with the use of expressjs?

Alright, I have an interesting idea here. I am looking for a way to allow users to push a button and have a new p element permanently added to the HTML file. This means that even after reloading the page, everyone should be able to see this new element. An ...

javascripthtmlcssnode.jsexpress

Create an HTML form that sends email notifications using a third-party form backend platform

I recently designed a form using Webflow and integrated it with Getform.io for the backend platform. Everything is running smoothly, including data collection and file uploads. However, I now want to enhance the form by enabling it to automatically send ...

phphtmlforms

Gradually shifting alignment of Bootstrap tooltips

I am encountering an issue with Bootstrap tooltips They seem to be progressively off-center Below is the code I am using for the icons {{#each guilds}} <div class="col-sm-1"> <a href="/dash/{{this.id}}"> <div class="gicon"> ...

cssbootstrap-4handlebars.js

Adding CSS to an HTML title is a straightforward process that involves linking an

I have a datatable that I am using for data population. I want to add CSS styling to the headers, specifically using Title for the header tooltip. Is it possible to use CSS along with it? #mainTable title { font-weight: bold; font-size: 30px; colo ...

jqueryhtmlcss

Error encountered while parsing Google Map link in Razor.Parse

Situation Within my application, I am utilizing Razor.Parse<>() to parse text, links, and tags to HTML. string Razor.Parse<TEmail>(string razorTemplate, TEmail model) where TEmail : BaseEmail I utilize the symbol '@' to extract dat ...

c#htmlparsingrazor

news feed front-end - Django/HTML

I'm currently working on a social networking website with Django and HTML. On my blog list page, I have all the posts from various users displayed in a single container. But I want to separate these posts into individual tiles or containers, similar t ...

htmlcssdjango

It appears that when using Python's Selenium to open Chrome, the HTML page is dynamically inserting an iframe element

Recently, I started delving into the world of selenium and web automation, attempting to develop a program to streamline paper searches on PubMed using chromedriver. My primary goal is to automate the process of clicking the "Sign in" button located in th ...

pythonhtmlseleniumiframeselenium-chromedriver

The issue of misaligned display of HTML and CSS rectangles

Greetings! I've got a website that contains some informative text for users. To enhance its visibility, I'm looking to add a white rectangle as a background behind the text. Although I can successfully draw the rectangle, it appears over the tex ...

htmlcss

Changing a CSS block in IE7 using jQuery

Users have the ability to update the look of their customizable widget by editing CSS code in a textarea that automatically updates a <style> element when changed. Here is the JavaScript function: function updateWidgetStyling() { $("#stylePrevi ...

jquerycssinternet-explorer-7stylesdhtml

What causes the inconsistency in time intervals in the loop?

My goal was to create a simple slider that loops through 3 images, with each image staying visible for 3 seconds before fading out and the next one fading in. However, I encountered an issue: The first image can stay for 3 seconds, but once the loop star ...

javascriptjqueryhtmlcss

CSS - Struggling to center an element with absolute positioning in IE

I have created a layout with 3 div elements. The first parent div has a css property of position relative and is taking up the full width of the viewport. The second child div has an absolute position to cover the entire area of the parent. The third child ...

htmlcssinternet-explorer

Is there a way for me to view the table and information on this website?

Currently, I am in the process of extracting specific data from a table on the following website: . To achieve this, I have opted to use Python along with selenium. The issue arises when attempting to extract the table using read_html() from pandas. Unfor ...

htmlpandasseleniumbeautifulsoupselenium-chromedriver