Tooltip in table with overflow hidden - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table

Description

Tooltip in table with overflow hidden

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
table {<!--from  w w  w  .j  a  va2 s  . c om-->
   font-size:12px;
   width:701px;
   table-layout:fixed;
   border:2px solid Chartreuse;
   border-collapse:collapse;
}

th {
   vertical-align:middle;
   border-bottom:2px solid yellow;
   height:33px;
}

td {
   border:2px solid blue;
   vertical-align:middle;
   padding:11px 6px;
   border-bottom:2px solid pink;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
   position:relative;
}

.p20 {
   width:21%;
}

a {
   text-decoration:none;
   color:OrangeRed;
}

.tooltip {
   position:relative;
}

.tooltip .tooltiptext {
   visibility:hidden;
   width:121px;
   background-color:grey;
   color:BlueViolet;
   text-align:center;
   padding:6px 0;
   margin-left:6px;
   border-radius:7px;
   position:absolute;
   z-index:2;
}

.tooltip:hover {
   overflow:visible;
}

.tooltip:hover .tooltiptext {
   visibility:visible;
   top:-6px;
   left:111%;
}
</style> 
 </head> 
 <body> 
  <table> 
   <tbody> 
    <tr> 
     <th p20>L</th> 
     <th p20>L</th> 
     <th p20>L</th> 
     <th p20>L</th> 
     <th p20>L</th> 
     <th p20>L</th> 
    </tr> 
    <tr class="to-center"> 
     <td>Lorem ipsum dolor sit amet, con</td> 
     <td class="tooltip"> <a href="#">Lore<span class="tooltiptext">Lorem ip</span> </a> </td> 
     <td> <a href="#" class="tooltip">Lorem ipsum dolor sit amet, conse<span class="tooltiptext">Lorem</span> </a> </td> 
     <td> <a href="#" class="tooltip">Lorem i<span class="tooltiptext">Lorem ipsu</span> </a> </td> 
     <td class="tooltip"> <a href="#">Lorem ipsum dolor sit am<span class="tooltiptext">Lorem ipsum dolo</span> </a> </td> 
     <td> <a href="#" class="tooltip">Lor<span class="tooltiptext">L</span> </a> </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials