JQuery mousehover text on td table?

Question

I am using jquery table and html.

I have fixed width table columns. But I don’t want the text wrapping to the next line or enlarging the table when the text td exceeds the width.

Is it possible to display the value of td on hover when the length of the text is greater than the width of td?

If the td value is:

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

then I should only display:

abccccc......

and on hover I should display all the text:

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

Is it possible? Please suggest me.

How can I calculate if text length exceeds td?

Thank!

Answer 1

jQuery, , CSS . , tooltip:

:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

$("td").each(function(){
    var val = $(this).text();

    if(val.length > 8){
        $(this).attr("title", val);
        $(this).text(  clip( $(this).text() ) );
    }
});

// once the attributes have been set, execute the tootip:

$(document).tooltip();

// helper method
function clip(string){        
    return string.substr(0, 8) + "...";        
}

Answer 2

,

HTML

<span class='more'>abbcccccccccccccccccccccccccccccccccccccccccccccccccccc</span>

CSS

.more{
    display:inline-block;
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.more:hover{
    white-space:initial;
    cursor:pointer;
    width:100%;
}

Table,

HTML

<table>
    <tr>
        <td style="max-width:100px">
           <span class='more'>abbcccccccccccccccccccccccccccccccccccccccc</span>
        </td>
    </tr>
</table>

CSS

.more:hover{
    white-space:initial;
    cursor:pointer;
    width:100%;
    word-wrap:break-word;
}

Answer 3

, jquery checkout → https://jqueryui.com/tooltip/

Answer 4

, CSS addClass/removeClass, :

HTML:

<div id="mydiv">
    <span id="short" class="show"> gcccc...</span>
    <span id="full" class="hidden"> gcccccccccccccccccc </span>
</div>

JS:

$('#mydiv').on('mouseover', function(){
    $(this).find('#full').removeClass('hidden');
    $(this).find('#short').addClass('hidden');
});

$('#mydiv').on('mouseout', function(){
    $(this).find('#short').removeClass('hidden');
    $(this).find('#full').addClass('hidden');
});

CSS

.hidden{
    display: none;
}

JSfiddle

Answer 5

: http://jsfiddle.net/jogesh_pi/ueLha/

HTML

<table id="data_container" border="1">
  <tr>
    <td><span>asdfadsfadsfasdfasdfasdfasdfasdfsadfasdf</span></td>
    <td><span>kljkjlhklhlkhklhkhasdfasdfasdfadsfasdfas</span></td>
  </tr>
</table>

JS

$('#data_container td').each(function(){
    $(this).find('span').width(20);
});

$('#data_container td').hover(
    function(){
        $(this).find('span').css('width', '100%');
    }, 
    function(){
        $(this).find('span').css('width', '20px');
    }
);

CSS

span{
  max-width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  margin-right: 10px;
  position:relative;
}
#data_container td{width: 50%;}

Answer 6

, CSS , .

HTML:

<table>
  <tr>
    <th class='one'>Column One</th>
    <th class='two'>Column 2</th>
  </tr>
  <tr>
    <td class='one'><span>Very long text which just goes on and on and on and on and ends.</span></td>
    <td class='two'>Epsilon Phi Ignatius Useful Strong Epsilon</td>
  </tr>
  <tr>
    <td class='one'><span>1</span></td>
    <td class='two'>2</td>
  </tr>
</table>

CSS

table {
  width: 100%;
  border-collapse: collapse;
}
table td,
table th {
  border: 1px solid black;
}
th {
  text-align: left;
  background: black;
  color: white;
}
td.one {
  vertical-align: top;
  width: 150px;
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
td.one:hover {
  overflow: visible;
}
td.one:hover span {
  min-width: 130px;
  position: absolute;
  display: block;
  background-color: red;
  padding: 0px 20px 0px 0px;
}
td.two {
  width: auto;
}

JSFiddle, / ..:

https://jsfiddle.net/d233dbz7/