Badges and Tooltips integration with Bootstrap4

dt1

I have tried to use bootstrap4 Badges classes inside tables but they casue some kind of columns mis allignments.
In addition I have tried to use the Bootstrap4 tooltips with some Buttons and I'm getting only the HTML tooltips style and not the Bootstrap4 sytle. Was this ever tested?
Thanks
Elan

bindrid

I would like to see how you are implementing tooltips in BS4.

dt1

<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();

var table = $('#example').DataTable( {
        dom: "frtip",
        ajax: "../php/upload.php",
        columns: [  
            {
                data : null,
                //className : "center",
                defaultContent : '<div align="center"><button type="button" PersonID=.$row["PersonID"]. class="btn btn-info selectrow " data-toggle="tooltip" title="Select User"><span class="fas fa-angle-right fa-lg " style="color:black"></span></button></div>',
                width:"10px"
            },
            {
                data: "Picture",
                className : "selectrow",
                render: function ( file_id ) {
                    return file_id ?
                        '<img src="'+editor.file( 'files', file_id ).web_path+'"/ class="rounded-circle mx-auto d-block"  width="75" height="75" data-toggle="tooltip" title="Select User" style="cursor:pointer">':null;
                },
                defaultContent: "No image",
                //title: "Picture"
            },
            
            { data: null, render: function ( data, type, row ) {
                // Combine the first and last names into a single table field
                return data.PersonalName+' '+data.FamilyName;
                } 
            },


            {
                data : null,
                className : "center",
                defaultContent : '<div align="center"><button type="button" class="btn btn-warning editrow" data-toggle="tooltip" title="Edit User"><span class="fas fa-pen fa-lg" style="color:black"></span></button><span> </span><button type="button" class="btn btn-danger deleterow" data-toggle="tooltip" title="Delete User"><span class="fas fa-trash-alt fa-lg" style="color:black"></span></button></div>',
                width:"110px"
            }
                ],
      
    } );

} );

</script>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

dt1

I'm referring to tooltips that are part of the data in the Table. (they can be attached to Links, Buttons, etc but only inside the table)
If defined in the HTML part of the page the tooltips work OK

Elan

allan

Hi Elan,

The issue is that you are initialising the tooltips ($('[data-toggle="tooltip"]').tooltip();) and then loading the DataTable data. So the tooltips were initialised before the HTML for the table data was present on the page - hence why they aren't Bootstrap styled.

Add:

table.on( 'draw', function () {
  $('[data-toggle="tooltip"]').tooltip();
} );

immediately after your DataTable initialisation to resolve.

Allan

kthorngren

Seems like drawCallback would need to be used or the tooltips won't be initialized on the first page when the Datatable is initialized. The draw event doesn't seem to fire until the next draw takes place after Datatables initialization.

Example here:
http://live.datatables.net/nawocuye/2/edit

Kevin

allan

Yup - if you are Ajax loading the data, that isn't an issue, since another draw will occur when the data has been loaded and the event listener added. However, you can listen for draw.dt from jQuery - add it before the DataTable is initialised: http://live.datatables.net/nawocuye/3/edit .

Allan

kthorngren

Thats good to know. Been tripped up by using the draw event with DOM based data before. Now I know why

Kevin

bindrid

@allan @kthorngren and now you see why I like to help in the forums. It also teaches me so I can better use DataTable. (it is used heavily in my web site).

kthorngren

@bindrid

now you see why I like to help in the forums. It also teaches me

Me too!

Kevin

dt1

Thank you all.
Your recommnedations and comments helped me to sort the issue of Tooltips out.

But what about Bootstrap Badges?
They sim to casue some issues as well.