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 :

/

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/pow7651t/1/

• javascript
• jquery
• html
• html-table

Share Improve this question Follow edited Nov 19, 2017 at 10:15 MiLaD A asked Nov 19, 2017 at 7:44 MiLaD AMiLaD A 14533 silver badges1515 bronze badges 4

• 1 Please create a working plunker/fiddler for it. It will help to answer quickly. – Vipin Kumar Commented Nov 19, 2017 at 7:53
• i added the fiddle to my question , i wrote those tooltips my self , i want to know if i can do it dynamicly – MiLaD A Commented Nov 19, 2017 at 8:56
• waht do you mean show information about that entire row. ? show all cels info in each toottip ? – Bourbia Brahim Commented Nov 19, 2017 at 9:11
• i mean when i hover mouse on any cell of my table , tooltip shows the data on row of that cell, see myu fiddle , its clear – MiLaD A Commented Nov 19, 2017 at 10:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables/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>

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