Show a div when hovering or clicking in a cell

Show a div when hovering or clicking in a cell

arnorbldarnorbld Posts: 110Questions: 20Answers: 1

Hi guys,

I have a list with a column that can have up to 2000 characters of data. Usually, it only has 40-60 characters or so, but in some cases, they need to add more text. I'd rather not display all that text in the cell as it would make the rows very uneven and I think it would end up being difficult for them to navigate.

So my idea is that perhaps I show the first LINE they have in the text in the cell and then if they hover over it OR click on the cell it pops up a floating div close to the cell where they can see all the text or a text box that they can scroll.

Is there something like that built into DT? If not, do you have any pointers on how to make the hovering/clicking work?

Best regards,

Replies

  • kthorngrenkthorngren Posts: 20,258Questions: 26Answers: 4,763

    Does the Ellipsis plugin do what you want?

    Kevin

  • arnorbldarnorbld Posts: 110Questions: 20Answers: 1

    Hi,

    Will check it out. Since the text has to be able to span multiple lines, I'm not sure if the browser tooltip can do that. Kind of like this:

    Line 1
    Line 2
    Line 3
    

    etc. If it CAN, then this looks like the perfect solution :)

    Will check it later and let you know.

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    This example here should hopefully get you going. It's combining the ellipsis plugin that Kevin mentioned, with rowCallback to expand them with a tooltip on hover. You could change the ellipsis code to break on the first instead.

        columnDefs: [
          {
            targets: 1,
            render: function(data, type, row) {
              if ( type === 'display') {
                return renderedData = $.fn.dataTable.render.ellipsis(10)(data, type, row);            
              }
              return data;
            }
          }
        ],
        rowCallback: function(row, data, displayNum, displayIndex, dataIndex) {
          $(row).find('td:eq(1)').attr('title', data[1])      
        }
    

    Colin

  • arnorbldarnorbld Posts: 110Questions: 20Answers: 1

    Hi Colin,

    Thank you. I'll see what I can find out.

  • arnorbldarnorbld Posts: 110Questions: 20Answers: 1

    Hi Colin,

    With the example I modified the code slightly to show "Test<br>" before the data in the title:

            render: function(data, type, row) {
              if ( type === 'display') {
                return renderedData = $.fn.dataTable.render.ellipsis(20)('Test<br>' + data, type, row);            
              }
              return data;
            }
    

    This does not display right in the tooltip, where it shows with the <br> tag:

    However, if I put in the JS CR (\r) it works and breaks on the \r

    I think that will do for now. I can look at more elaborate options later!

  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin

    That is correct - be default the ellipsis renderer will escape HTML to help protect against XSS attacks from unsanatised HTML.

    You can pass false as the third argument to the render if you don't what that behaviour:

    return renderedData = $.fn.dataTable.render.ellipsis(20, true, false)('Test<br>' + data, type, row);
    

    Allan

Sign In or Register to comment.