bootstrap 4 tooltip not working after datatable load

wuwu

hi, is anyone having problem with bootstrap 4 tooltip not working after datatable call? If i remove the datatable in the cshtml, the tooltip is working but when I include the datatable, the tooltip will sometimes display on the left most and bottom of the screen. I am using below to populate my datatable and render button with tooltip. Also, my Logo in navbar under the _layout.cshtml will also got affected and displaying only text of the tooltip. But when refreshing it, it will go back to displaying the tooltip correctly until you navigate again to the cshtml with datatable.

    "columns": [
        { "data": "LocationTypeCode" },
        { "data": "LocationTypeDescription" },
        {
            "render": function (data, type, row) {
                return '<a href="#" class="btn btn-warning btn-sm" onclick="EditLocationType(' + "'" + row.LocationTypeCode + "'" + ')" data-trigger="hover" data-toggle="tooltip" data-placement="bottom" title="Edit Location Type"><span class="fas fa-edit"></span></a> \n' +
                    '<a href="#" class="btn btn-info btn-sm" onclick="ViewLocationType(' + "'" + row.LocationTypeCode + "'" + ')" data-trigger="hover" data-toggle="tooltip" data-placement="bottom" title="View Location Type"><span class="fas fa-eye"></span></a>'
            },
            "orderable": false,
            "width": "150px"
        }
    ]

thanks

kthorngren

Your code works here:
http://live.datatables.net/miguroze/1/edit

Please provide a test case or link to your page so we can help debug your issues.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

wuwu

Hi Kevin, i am using the same project that we fixed. It is .net that uses generic handler and called from jquery datatable. In my project, I am using mvc cshtml that uses _layout.cshtml. With your sample, how and where will i declare the following in my view?

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.20/datatables.min.css"/>

thanks.

wuwu

Hi Kevin, also I noticed that when I removed the reference from jquery-ui as seen below, the tooltip now on the navbar (which is on the _layout.cshtml) and the buttons on the datatables are both working. Except for the buttons in the datatables which is displaying the standard yellow background tooltip unlike in the navbar logo, it display the black and white but they are displaying in the correct place. The problem is we need this reference to jquery-ui. I declare this actually in the bottom of the view cshtml.

@section scripts{

@*<script src="~/Scripts/jquery-ui-1.12.1.js"></script>*@
<script src="~/Scripts/DataTables-1.10.20/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables-1.10.20/datatables.min.js"></script>

<script src="~/Scripts/UDS/LTList.js"></script>

}

thanks

kthorngren

Styling issues are almost impossible to debug without seeing them. Thats why we ask for test cases showing the issues.

Looks like you might be loading Datatables twice. I think the js/jquery.dataTables.min.js is Datatables itself and datatables.min.js is a bundled Datatables with additional extensions and maybe the styling framework you are using (Bootstrap maybe?). You can open both files and at the top it will tell you what is contains. Likely you will want to remove line 2 and just use line 3. Hare to say without seeing it though.

If you can't post a link or create a test case then my next suggestion is to build up the example I provided until you have replicated the issue.

Kevin

wuwu

hi Kevin, i removed already line 2 and uncommented line 1 but still the tooltip in datatable is displaying the standard yellow background and the navbar logo is displaying text without arrow and background on far below and at the bottom at the same time. Yes it is hard to replicate and post it since i created it in .net mvc using generic handler, bootstrap 4 and jquery datatables. This is the only problem i have now. I am thinking of removing the tooltip but I don't know what to replace for it.
thanks

wuwu

Hi Kevin, it seems that there is a conflict on tooltip of bootstrap 4 against the tooltip of jquery. Your example is the tooltip of the jquery since it has no arrow unlike the tooltip of bootstrap, it has arrow and the background is black and text is white.

kthorngren

According to the BS4 tooltips docs you need to initialize using $('[data-toggle="tooltip"]').tooltip(). For that to work popper.js needs to be included. The tooltip() method needs to run for each page loaded as it applies to only the elements on the current page. Use drawCallback for this. Updated example:
http://live.datatables.net/miguroze/3/edit

Kevin

wuwu

Hi Kevin,
It seems that the cause of the issue is this reference :

I check your references and one of it you declare this:

If I follow yours, the tooltip will show already. But my problem is it cause another problem which is draggable is not a function something since I call this on my js to set the bootstrap modal to draggable. Any ideas?

Thanks

kthorngren

You will need to provide a link to your page or a test case showing the issue. If you are getting draggable is not a function then it sounds like you aren't loading all the proper JS libraries or they are not in the correct order.

Kevin