Badges and Tooltips integration with Bootstrap4

Badges and Tooltips integration with Bootstrap4

dt1 dt1 Posts: 52Questions: 5Answers: 0

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

Answers

  • bindridbindrid Posts: 730Questions: 0Answers: 119

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

  • dt1 dt1 Posts: 52Questions: 5Answers: 0
    edited July 2018
    <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 dt1 Posts: 52Questions: 5Answers: 0

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited July 2018 Answer ✓

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

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

    Kevin

  • bindridbindrid Posts: 730Questions: 0Answers: 119
    Answer ✓

    @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).

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited July 2018 Answer ✓

    @bindrid

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

    Me too!

    Kevin

  • dt1 dt1 Posts: 52Questions: 5Answers: 0

    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.

This discussion has been closed.