modal/popup on cell hover

екатерина

Hello, my task is that when you hover over a cell next to it, a window pops up with additional information about this cell. Please tell me how this can be implemented?

kthorngren

See if this thread answers your question.

Kevin

екатерина

maybe it fits, but I can't see the code presented in the examples, could you duplicate it either through another site, or just write the code?

kthorngren

This example from the thread shows how to use the title attribute:
https://jsfiddle.net/93w5d6ye/

Hover over one of the td and you will see the title appear using tis code:

                       'createdRow': function (row, data, rowIndex) {
                          // Per-cell function to do whatever needed with cells
                          $.each($('td', row), function (colIndex) {
                              // For example, adding data-* attributes to the cell
                              $(this).attr('title', data[colIndex]);
                          });
                        },

It uses [jQuery attr()(https://api.jquery.com/attr/) to apply the title attribute. If this doesn't help then please provide more information about what you are trying to do or questions you have. You can build a simple test case with an example of what you have and details of your requirements so we can provide more specific help.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

екатерина

https://jsfiddle.net/jLryc0pq/2/
I inserted the code from the example, but the window does not appear, what is my mistake?

kthorngren

The problem is that code is using array based data which is accessed via data[colIndex]. Your test case is using objects so you need to access the data using object notation, for example data.name. That loop won't work. Take a look at this example which creates a title for the Name column that shows the corresponding Position and Office.
https://jsfiddle.net/k596opfz/

Kevin

екатерина

Is it possible to make it so that the window shows a datatable with three columns?

kthorngren

Are you asking to show a modal with a Datatable containing data from whatever row the user is hovering over? You would use standard Javascript/jQuery techniques to create a hover event handler. You can then get the row data of the hover row and display it in a modal. You can initialize a Datatable if you wish. There are lots of Stack Overflow threads discussing techniques, like this thread.

Here is an example showing how to get the row data when the row is clicked. This should help with getting the data from the hover event handler.

Kevin

екатерина

I'm sorry, you correctly understood what I need, but the example you specified is not entirely clear to me. Could you please give some more example where the datatable will be specified in the popup modal window

kthorngren

Maybe you can start by building a test case that opens a modal when hovering over the row or cell. This is not a Datatables function but you will use standard Javascript/Bootstrap tools to show the modal. If you still need help with getting the Datatables data we can help with the test case. Start with one of these JS BIn templates.

Kevin