表的每个单元格上的动态工具提示文本

Question

i can set tool-tip for each cell of my table using title
but is there a way to make the tool-tip text to be dynamic ?
for example when i hover on any cell of table it show information about that cells entire row.

<td title="something">46879</td>

example using datatables plugin :

$(document).ready(function() {

$('#example tbody tr').each( function() {
    var sTitle;
    var nTds = $('td', this);
    var sBrowser = $(nTds[1]).text();
    var sGrade = $(nTds[4]).text();

    if ( sGrade == "A" )
        sTitle =  sBrowser+' will provide a first class (A) level of CSS 
support.';
    else if ( sGrade == "C" )
        sTitle = sBrowser+' will provide a core (C) level of CSS support.';
    else if ( sGrade == "X" )
        sTitle = sBrowser+' does not provide CSS support or has a broken 
implementation. Block CSS.';
    else
        sTitle = sBrowser+' will provide an undefined level of CSS 
support.';

    this.setAttribute( 'title', sTitle );
} );


var oTable = $('#example').dataTable();


$( oTable.fnGetNodes() ).tooltip( {
    "delay": 0,
    "track": true,
    "fade": 250
} );
} );

this is what i mean :

https://jsfiddle.net/pow7651t/1/

Answer 1

Please have a look at following solution. Note that, I have added an extra variable for columns. Let me know if this works, or if there is any issue with this solution.

 $(document).ready(function() { var columns = ['Names', 'Reg Number', 'ID Code'] $('#example tbody tr').each(function() { var cells = $('td', this); var titleArr = cells.map(function(index) { return columns[index] + '=' + this.innerHTML; }); cells.each(function(index) { var finalTooltip = titleArr.filter(function(i){ return index !== i; }); $(this).attr('title', finalTooltip.toArray().join(',')) }) var name = cells[0]; var regNumber = cells[1]; var idCode = cells[2]; }); var oTable = $('#example').dataTable(); $(oTable.fnGetNodes()).tooltip({ "delay": 0, "track": true, "fade": 250 }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/> <table id="example"> <thead> <th>Names</th> <th>RegNumber</th> <th>ID Code</th> </thead> <tbody> <tr> <td>Ryan</td> <td>49765</td> <td>34</td> </tr> <tr> <td>John</td> <td>58964</td> <td>42</td> </tr> <tr> <td>Daniel</td> <td>472658</td> <td>24</td> </tr> </tbody> </table> 

Answer 2

You have to create a title attr for each cell of your table ,

in the below Fiddle a did loop throw each row , and inside those a get the text and the header of each cell except the current cell ( .not(this) ) and then set the title attribute to this last .

See this Fiddle