77903

How to wrap large text in a table and display it on mouse hover as a popover?

Question:

Can this be done using only HTML and CSS? Below is the code I tried. The problem is on mouse hover it displays it in the same cell and changes the width of the tables. Is there a way to display the text as a popover?

<pre class="snippet-code-css lang-css prettyprint-override">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 */ } <pre class="snippet-code-html lang-html prettyprint-override"><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>

Answer1:

You can use position:absolute; to make the text get out of the flow when you hover over it

<pre class="snippet-code-css lang-css prettyprint-override">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; } <pre class="snippet-code-html lang-html prettyprint-override"><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>

Answer2:

Try This,

<pre class="snippet-code-css lang-css prettyprint-override">.expand { max-width : 50px; white-space : nowrap; overflow : hidden; } .expand:hover { max-width : initial; } <pre class="snippet-code-html lang-html prettyprint-override"><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>

Answer3:

You can use title attribute, and not use that hover css. I replicate code here just for show you a way, but you should use javascript to manipulate your text data into title attribute instead of using replication here.

<!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 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" 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 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" 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 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> </body> </html>

Answer4:

it seems you're looking for tooltips or popovers, these feature have to be implemented via javascript because you will better handle positioning (imagine when your element is close to a border) or, delaying opening/closing.

Bootstrap has these features:

<ol><li><a href="http://getbootstrap.com/javascript/#popovers" rel="nofollow">http://getbootstrap.com/javascript/#popovers</a></li> <li><a href="http://getbootstrap.com/javascript/#tooltips" rel="nofollow">http://getbootstrap.com/javascript/#tooltips</a></li> </ol>

but I imagine there are plenty of them over github!

Recommend

  • access unkown columns of a table and insert them into a new one
  • Power bi filter column by slicer
  • How can I refresh the entire table sorting cache after dynamic table update?
  • How to filter a range by first Character in a cell?
  • applying background to first, and every third row in a dynamically generated table
  • sql1 to get names and sql2 to get Impressions, I need to sort names by Impressions
  • Handling null values with wso2 CEP
  • dynamically set table titles with jquery's Datatables plugin - get titles from data object
  • regex, multiline extract in R
  • Index Multiple Columns w/ Ruby on Rails
  • How to merge 2 or more columns into one?
  • Select from table that does not exist
  • Accessing another variable in the same class with a click event
  • Why can't UI components be accessed from a backgroundworker?
  • garbled css name when styling within UiBinder
  • How to open html table in xls on click of a button
  • Plotting densities in R
  • Update Google Maps traffic layer without page reloading
  • How to getText() from the input field of an angularjs Application
  • D3 get axis values on zoom event
  • How to handle images sent by a mobile device?
  • CakePHP 2.0.4 - findBy magic methods with conditions
  • Installing iPhone App to iPhone
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Read a local file using javascript
  • Recording logins for password protected directories
  • Pass value from viewmodel to script in zk
  • How to set/get protobuf's extension field in Go?
  • How to show dropdown in excel using jrxml (jasper api)?
  • Unanticipated behavior
  • Cannot Parse HTML Data Using Android / JSOUP
  • Benchmarking RAM performance - UWP and C#
  • JTable with a ScrollPane misbehaving
  • Java static initializers and reflection
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?