javascript - Tableview flyout with overflow content on hover -

i'm trying provide tableview data clipped. in tableview see data, , data not fitting on 1 line clipped.

i provide styling such that, on hover, flyout appear showing full contents of table cell. got this:

<table data-toggle="table"    data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/"> <thead> <tr>     <th data-field="name" data-formatter="trimtext">name</th>     <th data-field="stargazers_count" data-formatter="trimtext">stars</th>     <th data-field="description"         data-formatter="trimtext" data-formatter="trimtext">description</th>     <th data-field="forks_count" data-formatter="trimtext">forks</th> </tr> </thead> 

function trimtext(value) {      return '<div class="trim-text">' + value + '</div>';    }  .trim-text {     width: 100%;     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap; }  td {   position: relative;   overflow: hidden;   text-overflow: ellipsis; }  td:hover {   overflow: visible; }  .trim-text:hover {   position:absolute;   padding: 8px;   left: 0;   top: 0;   width: 100%;   white-space: normal;   background-color: #f00;   z-index: 100;  }  table {     table-layout: fixed;     word-wrap: break-word;     } 

http://jsfiddle.net/e3nk137y/15975/

on hover, set position of cell absolute , make flyout of text. while shows result i'm aiming for, have flyout behave more intuitively.

1. is possible make flyout appear when there overflow of text?

2. when column on left side, flyout (with width 200% width of td cell) should remain in table, , not go on right border of table.

does know solution these problems or example tries achieve similar? thanks!