Tooltip and data rendering

carrarachristophe

Hello,

I have some trouble to apply a tooltip to a data rendered cell.

See example (dummy example based on an existing case that I found):
* the tooltip works fine on column 0 (it displays the salary)
* but if you change to "targets": 1 (column with rendering), there is no tooltip
https://jsbin.com/celosew/latest/edit?html,js,output

I also tried to keep the column as simple as possible, amending

      {data:null, render: function ( data, type, row ) {
                    return data.position + ' ' + data.position ;
      }},

to

      {data:'position', title: 'Position'},

and then mixing:
* the contatenation of 2 position fields
* and the tooltip
But cannot make it work.

Any idea on how I could merge both returns??

desperado

Why combine two render methods ? Just use one or the other ?

Use columns render
https://jsfiddle.net/gouldner/n8qpz729/

Or use columnDefs
https://jsfiddle.net/gouldner/brwy13x4/

carrarachristophe

Thanks desperado. It works like a charm.
I did not want to use 2 render methods. I was just failing to combine them!

Any recommendation between the 2 methods (use of column defs or not?

Additional question, if you allow me.
I am not sure I get the purpose of the second (after closing div) data.position + ' ' + data.position in:

+ data.position + ' ' + data.position + '</div>' : data.position + ' ' + data.position;

For example, if I use instead
+ data.position + ' ' + data.position + '</div>' : data.position ;
or
+ data.position + ' ' + data.position + '</div>' : data.office;
I don't see any difference

desperado

Which technique you use is really up to your implementation and which is more convenient for your design. One is not necessarily better than the other.

Regarding your question about the purpose of the second data.position + ....
The check you are performing is for type === display so the render is returning the div with the tooltip when rendering for display and is sending the regular value for all other types. The second value in the else condition will be returned for sort, filter etc

The types are documented here.
https://datatables.net/reference/option/columns.render
and here
https://datatables.net/manual/data/orthogonal-data

The point of rendering differently based on type is to allow plain text to be sent to something like filter or sort while producing the div for display.

Another good example might be rendering of dates. You may want a MM-DD-YYYY format for display but for sort you may want YYYYMMDD so it sorts correctly.

I wasn't sure why you wanted position repeated twice, I assumed it was just an example. Since I couldn't understand why you were repeating the value on display I chose to also repeat it for the other rendering types. That was an arbitrary decision on my part, I could have used a single data.position for the other renderings also, I had no specific reason to repeat it. Once you understand the various orthogonal types you will better understand how to use them.

Your example of returning position for display but office for everything else is also odd because that would mean sort and filter were looking at office while the user is seeing position. Typically you render based on the same value not others but there could be instances where you use a different value. For example you might want to pass in a time value in your data twice, once in military time and once in AM/PM format. Then you could return row.am-pm-time for display and filter while returning row.military-time for sort.

As another example I have had occurrences in my implementations to use a different value as part of display then I use for other orthogonal types. For example you might have a link in a cell that needs to launch a page with additional arguments from other data. You might for example display a Person's Name but make it a link which opens their HR data by launching a URL with the persons unique id number. Something like this.
if (type === 'display') {
return "<a href='/hrlink?employeeId=" + row.id + "'>" + row.name + "</a>";
}
return row.name;

You may also want to add your own orthogonal type for example if you implement buttons and want export and/or print. You don't want to export the position with the DIV, you would want export to just have the raw data. That technique can be seen here.
https://datatables.net/extensions/buttons/examples/html5/outputFormat-orthogonal.html

carrarachristophe

Thanks desperado.
I did not expect to receive such a detailled and professionnal reply.
Although I don't think everything is clear in my mind, I could successfully apply your recommendation and you definitely gave me all the information to dig into rendering.

desperado

No worries, a lot of people helped me when I started with DataTables and they still do . Merry Christmas and enjoy DataTables it's a useful tool!