Tips for displaying lengthy text within a table and showing it as a popover when hovering the mouse

Is there a way to create a popover using only HTML and CSS? I attempted the code below, but encountered an issue where on mouse hover, the text displays in the same cell and changes the table width. How can I achieve a stylish popover effect for the text?

table td.text {
  max-width: 10px;
}

table td.text span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}

table td.text span:hover {
  background-color: #BDE5F8;
  overflow: visible;
  white-space: normal;
  height: auto;
  /* just added this line */
}
<table>
  <thead>
    <tr class="text-center">
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
    </tr>
  </thead>
  <tr>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
  </tr>

</table>

javascriptjqueryhtmlcssangularjs

Answer №1

When you hover over the text, use position:absolute; to remove it from the normal flow.

table td.text {
  max-width: 10px;
  
}

table td.text span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}
table td.text:hover span:not(.empty) {
  background-color: #BDE5F8;
  overflow: visible;
  white-space: normal;
  height: auto;
  /* just added this line */
  position:absolute;
}
<table>
  <thead>
    <tr class="text-center">
      <th>Column1</th>
      <th>Column2</th>
      <th>Column3</th>
      <th>Column4</th>
    </tr>
  </thead>
  <tr>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></td>
    <td class="text"><span class="empty"></span></td>
  </tr>

</table>

Answer №2

Give this a shot!

.expand {
  max-width : 50px; 
  white-space : nowrap;
  overflow : hidden;
}

.expand:hover {
  max-width : initial; 
}
<table border="1">
  <thead>
    <tr>
      <td>
        <strong>Lorem</strong>
      </td>
      <td>
        <strong>Ipsum</strong>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td class="expand">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </td>
    </tr>
  </tbody>
</table>

Answer №3

If you want to avoid using the hover CSS, you can utilize the title attribute instead. Here is an example code snippet that demonstrates how to do this. However, it's recommended to use JavaScript to dynamically populate the title attribute with your text data rather than duplicating it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        table td.text {
            max-width: 10px;
        }

        table td.text span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            max-width: 100%;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr class="text-center">
        <th>Column1</th>
        <th>Column2</th>
        <th>Column3</th>
    </tr>
    </thead>
    <tr>
        <td class="text" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."><span>Lorem Ipsum...</span>
        </td>
        <td class="text" title="..."><span>...</span>
        </td>
        <td class="text" title="..."><span>...</span>
        </td>
    </tr>

</table>
</body>
</html>

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

What could be the reason for NPM failing to work following an update?

Just two days ago, I updated NPM and now it's suddenly not working on my Windows 10 20H2 platform. Every action I take results in the same error message: C:\Users\ethan>npm internal/modules/cjs/loader.js:883 throw err; ^ Error: Canno ...

javascriptnode.jsnpm

Encountering problems with Node Sass versions while trying to import custom scss files into app.js

I've encountered several articles on stack that didn't quite solve my issues. The problem arose when I tried to import a custom SCSS file into my React app.js to override bootstrap theme colors. Here are the style imports in my App.js: import &q ...

cssnode.jsreactjssassnode-sass

Ways to implement autoplaying videos that vanish upon completion

I am looking to have a video play automatically when someone visits my website, and then automatically transition to displaying only the logo of my company once the video is finished. Initially, I attempted using a simple video tag like this: <video w ...

javascripthtmljqueryhtml5-videoyoutube-iframe-api

Distinguish between the iOS native UIWebView and an iOS desktop web app

When using the navigator.useragent request, I am able to gather information about all browsers or webkits. However, I am having trouble distinguishing between a webapp (iOS desktop bookmark) and a native app iOS webkit as they both provide the same info ...

javascriptiosxcodehtml

Is there a way to substitute the value of an element with generated HTML content?

I'm trying to compile HTML with Angular and replace the contents of a DOM element. Can someone provide an example of how to do this? Here's what I have so far: var html = "<div>{{msg}}</div>"; var scope = $scope.$new(); var scope.msg ...

javascripthtmlangularjsangularjs-directive

What is the best way to display the counter result on the cards at the top of an html webpage?

My latest project involves a comparison script using Groovyscript to analyze two distinct files. Embedded within the Groovyscript is HTML code that utilizes CSS and potentially Bootstrap of any version. I have successfully implemented counters with a titl ...

htmlcssbootstrap-4

Express.js is still displaying the 'Not Found' message even after deleting the initial code

Despite multiple attempts to resolve what I initially thought was a caching issue by completely removing all code from my server, I am still facing the same problem: The default error handling provided by Express Generator in the app.js file contains the ...

javascriptnode.jsexpress

Is it acceptable to include a <section> tag parallel to the <main> tag within the HTML structure?

I'm in the process of creating a "legendary layout". Can someone tell me if this HTML code is correct? <header>My header</header> <section>My Menu</section> <main>My Content</main> <aside>Ads</aside> &l ...

html

Navigating with Angular and JWT after successful authentication

After successfully authenticating with JWT and angular-jwt, I'm wondering how to redirect the user to the home page while including the token in the header request. My backend is powered by Spring Boot and I am looking for guidance on how to handle th ...

angularjsspring-bootjwt

Sortable lists that are linked together, containing items that cannot be moved

I have been trying to implement two connected sortable lists with disabled items using this sortable list plugin, but for some reason, I am unable to get it to work. Is there anyone who can provide assistance with this issue? <section> <h1&g ...

jqueryhtmljquery-uijquery-ui-sortable

Ways to enable users to add or modify spry widgets

Is there a way to make it easier for users to edit spry accordions/tabbed panels in a navigation tool for locating points in PDFs? The PDFs are updated regularly, so the navigation will need frequent updates. The users who will be maintaining this tool h ...

javascripthtmldreamweaverspry

Struggling to understand the concept of JavaScript closures (such as, why is this loop not functioning correctly?)

Similar Question: Understanding JavaScript closures After going through the FAQ and multiple examples, I am still struggling to figure out why my code is not working as intended. Any hints or tips on what I might be doing wrong would be greatly apprec ...

javascriptfor-loopclosures

Encountered TypeError while attempting to submit form data via Ajax

Attempting to implement form validation using Ajax for real-time feedback without reloading the page. When calling the myAjax function, I pass specific parameters. function myAjax(method, parameters) { var ParametersArray = { "method": method, ...

javascriptphpajax

Thinking of hosting an event centered around Google Maps?

Are there specific event listeners for panning or zooming the Google Map, in addition to the mouseover, mouseout, and click events? UPDATE: I tried using 'center_changed', but it didn't work the way I expected. Whenever I move the mouse ov ...

javascriptgoogle-mapsgoogle-maps-api-3

using ng-options in AngularJS to showcase a specific value

I am attempting to loop through a collection of teams that are already part of a tournament and display them in a select box with preselected values. The teams in the select box are sourced from a team list that has an id association with the tournament&ap ...

angularjs

Deactivate Search Functionality for Users who are not Logged in on an Angular 2 Application

The login component and view are functioning as intended, preventing users from accessing AuthGuard protected routes if they're not logged in. However, I'm facing a challenge with the search bar displayed on the home login screen (actually presen ...

javascriptauthenticationangulartypescript

The bootstrap function for showing the modal with the ID "myModal" is malfunctioning

As someone who is just getting started with PHP and Bootstrap, I am running into an issue where the modal doesn't seem to work when triggered using the .modal method. Here is the PHP code I am using: if ($show_login_modal) { echo " <scr ...

javascriptphpbootstrap-4bootstrap-modal

What are the key elements of optimizing SEO for React, Angular, and WordPress Multisite

Greetings! I am in the process of developing a sizable website for my company and would greatly appreciate any feedback on whether this is a good idea or if I may be going a bit overboard. I have been given the green light to proceed as long as the website ...

angularjswordpressreactjsseowp-api

Discover the ultimate Flexbox solution for creating responsive layouts like never before!

I am working on achieving three different layouts in a responsive manner. 1st layout - default design https://i.sstatic.net/4M0AI.png 2nd Layout - with "min-width:600px" https://i.sstatic.net/f45xR.png 3rd Layout - with "min-width:700px ...

htmlcssflexbox

The href link does not direct to the main landing page

Clicking on the 'Visit website' button does not redirect me to home.html. Instead, it does nothing. How can I fix this issue? Any help would be appreciated. Preview.prototype = { create : function() { // Creating the Preview structur ...

javascripthtmlhrefhttp-redirect