How to select a row that has bootstrap tooltip span tags?

bjlap

Hi,
I created a table that displays bootstrap tooltips for text that doesn't fit in the columns. Works fine except for one thing: if you click in an area that is a <span>text</span> area for the tooltip, the row is not selected. So in order to select a row with tooltips you have to click somewhere outside the span areas,

How can I make those span areas clickable as well? Perhaps I must add a certain style to the span tag used for the tool tip?
Thanks a lot in advance for your help,
Bert-Jan

code snippets:

var tableHours = $('#TableHours').DataTable({
...
   initComplete: function (settings, json) {
                        $('[data-toggle="tooltip"]').tooltip();
                    },
...
  columns: [

                        {
                            "data": "EntryDate"
                        },
                        {
                            "data": "Project.Name",
                            "render": dataWithTooltip
                        },
...
        function dataWithTooltip(data, type, full, meta) {
            if (data != null) {
                return '<span data-toggle="tooltip" data-placement="left" title="' + data + '">' + data + '</span>';
            }
            else {
                return "";
            }
        }