Datatable sorting on Bootstrap tooltip title instead of text

lilbud

On a current project, I have a datatable with event info, and links in the form of dates. On some of the links, I've added a Bootstrap tooltip to show more info (like location). Though after adding the tooltip to the link, I've found that the column sorting is going off of that instead of the actual cell text.

Here are some of the rendered HTML cells:

<span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="custom-tooltip" data-bs-title="2025-07-03 [Thu]<br>San Siro"><a href="/events/20250703-01/">2025-07-03 [Thu]</a></span>
<span data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="custom-tooltip" data-bs-title="2018-12-15 [Sat]<br>Walter Kerr Theatre"><a href="/events/20181215-01/">2018-12-15 [Sat]</a></span>

The desired order would be as shown above, 2025 then 2018. However, with the tooltip, it is instead sorting based off of the tooltip title, and the second one is getting listed first when sorting decending (Walter > San).

I want the column to be sorted based on the date within the a link. This worked perfectly before, but when the tooltip is added, the sorting suddenly doesn't work like that anymore. I tried adding the html "data-order/data-sort" attribute, but this doesn't work.

The site is a local Django site I'm working on, so I can't link to the page. Here is the datatable init code if needed, and I can provide anything else that might be needed.

    $(document).ready(function () {
      new DataTable('#tourTable', {
        layout: layout,
        order: [[3, 'desc']],
        drawCallback: function (settings) {
          $('[data-bs-toggle="tooltip"]').tooltip();
        }
      });
    });

Thanks in advance

allan

Can you create a test case on Stackbltiz, JSFiddle, or https://live.datatables.net if you can't link to the original page please?

DataTables should be stripping the HTML from the data before applying any ordering. That said, I suspect that the HTML inside the attributes is what is causing the issue. The HTML stripping I use is fast, but basic and the <> inside the attributes will likely be causing the problem. If you remove the HTML in the attributes, does it then start working as expected?

As you say data-order on the td should help with that, but again, I'd need a test case.

Allan

kthorngren

I built a simple test case for you:
https://live.datatables.net/parofomi/1/edit

san siro">2025-07-03 [thu]

Datatables is using this as the sort data when the Tooltip is applied.

The Tooltip column is just the raw data and sorts incorrectly. I added two columns. The first, named Render, uses columns.render to extract the href text. The jQuery technique used might not be the most efficient. Will leave it to you to find a more efficient way to get the text. The second uses HTML5 data attributes with the date. Both seem to sort correctly.

If the dates still don't sort correctly in your full solution then you may need to use one of the options provided in this FAQ. For further help please provide a test case or update mine that show the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

allan

Amazing test case Kevin!

Without the render option the data-sort is correctly seen and sorted in the example. The HTML5 data attr column is detected as a "date" column type.

The tooltip and render option however are not. The problem with the date detection for the render column is that there is a [Sat] or [Thu] (etc) at the end of the data - which makes it not ISO8601 and thus the detection fails. Removing that allows it to work: https://live.datatables.net/parofomi/2/edit .

The tooltip one will always fail due to the HTML tag stripping approach in DataTables. It is a bit fast and loose, which works in 99% of cases, but not this one! You can use DataTable.util.stripHtml() to give DataTables a different HTML stripping function if you want to use that approach (this NPM package would do it for example), at the expense of code size and speed. That might be a trade off you want to make.

Allan

lilbud

Sorry for the delay, thanks to Kevin for providing that test case. Here is my test case, which only has the necessary columns. https://live.datatables.net/yarozizi/4/

Allan: yes, if the html tooltip is removed, the sorting works as expected. Although if you look at my test case, the odd part is that the sorting is being done on the text after the line break in the tooltip. So, not the date, but the location.

As it turns out, after looking at Kevin's case, I realized I was doing the data-sort wrong, adding it to the <a> instead of the <td> tag.

But, I ended up finding a workaround/solution on my own, which I'll detail below.

At first, I did try the render function but couldn't wrap my head around it. On a whim I decided to wrap the tooltip title in a <div>. And for some reason, that fixes the sorting without any additional JS functions or HTML tags needed. I applied this to the test case above on the "first" column so you can see the difference.

I tested some more, and it turns out that wrapping the tooltip in just about any tag fixes the sorting. Paragraph, span, any h1-6 tag, doesn't matter. Not sure if someone here could explain why exactly that changes how the table sees the column data to sort.

So for reference:
This tooltip sorts incorrectly, going off the location after the break: 2017-10-03 [Tue]<br>Walter Kerr Theatre. So, it would be listed first (descending) even if a more recent event is listed in the same column.

And this sorts correctly, going off the date: <div>2017-10-03 [Tue]<br>Walter Kerr Theatre</div>.

Thanks to both of you,
Brian