CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user755806
user755806

Reputation: 6815

JQuery mousehover text on table td?

I am using JQuery and Html table.

I have table columns with fixed width. But i dont want the text to wrap to next line or enlarge the table when td text exceeds the width.

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

If td value is as below:

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

then i have to display only:

abccccc......

and on mouse over i have to display entire text:

abbcccccccccccccccccccccccccccccccccccccccccccccccccccc

IS it possible? Please suggest me.

How can i calculate whether text length is exceeding the td length ?

Thanks!

Upvotes: 4

Views: 6766

Answers (6)

juanheyns
juanheyns

Reputation: 86

It seems like it may be possible with CSS only, provided you are willing to set some column widths fixed.

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;
}

Play around with this JSFiddle to adjust for your padding / widths etc:

https://jsfiddle.net/d233dbz7/

Upvotes: 0

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

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%;
}

Demo

Updated for Table,

HTML

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

CSS Change

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

Table demo

Upvotes: 3

jogesh_pi
jogesh_pi

Reputation: 9782

consider this example: 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%;}

Upvotes: 0

Gaurang Tandon
Gaurang Tandon

Reputation: 6753

A jQuery solution, with the benefit that you can limit the exact number of characters displayed, in CSS you can't. If you don't want to damage your table structure, use a tooltip:

Link these files first:

<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) + "...";        
}

Upvotes: 1

Kyo
Kyo

Reputation: 964

Not sure on the exact condition, but you can use the CSS and addClass/removeClass as below:

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

Upvotes: 0

TBAR
TBAR

Reputation: 448

It is possible with jquery checkout this -> https://jqueryui.com/tooltip/

Upvotes: 0

Related Questions