While working on one of my recent project I came across and issue when working with DataTables and WebUI-Popover. First let me state that this issue was only when populating the information using Ajax. I am going to assume you have the knowledge on installing the packages below. I will also assume you have your DataTables setup and working properly but have the same issue I had which is the popovers & tooltips not working.

Packages I Am Using

I have not tested with older versions, but i can imagine it will work the same.

What I Needed To Accomplish

There are some basic stats I wanted to show to the user when they click on the pie chart icon. Quick stats for the current month. Here is a screenshot of what I wanted to accomplish:

How To Make It Work

We are going to use DataTables drawCallback method to make this all work. Here is the content code for the popover (Note: I have removed some of the table rows to simplify the code below):

<button type="button" id="showPopOver" class="btn btn-pure btn-xs icon btn-warning showPopUp" href="javascript:void(0)" data-content='
   <table class="table popover">
        <thead class="bg-blue-grey-800 font-weight-400">
            <tr>
                <th width="50%" style="color: #FFFFFF">Stat</th>
                <th width="50%" style="text-align: center; color: #FFFFFF">Count</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Views</td>
                <td class="required text-center">'.(($inventory->views != 0) ? $inventory->views : 0).'</td>
            </tr>
        </tbody>
        <tfoot class="bg-blue-grey-800 text-center font-weight-400">
            <tr>
                <td colspan="2">
                    <a href="javascript:void(0)" style="color: #FFFFFF;">View Detailed Statistics</a>
                </td>
            </tr>
        </tfoot>
    </table>' data-animation="pop" data-target="webuiPopover6">
    <i class="icon wb-pie-chart" aria-hidden="true"></i>
</button>

Here is the JavaScript used to populate the table with data:

$(function() {
    $('#dealerInventory').DataTable({
        order: [[ 1, "desc" ]],
        processing: true,
        serverSide: true,
        stateSave:true,
        ajax: '{!! route('dealer::inventory.data', ['cond' => ""]) !!}/{!! $condition !!}',
        columns: [
            { data: 'condition_id', name: 'condition_id' },
            { data: 'created_at', name: 'created_at' },
            { data: 'stock', name: 'stock' },
            { data: 'year', name: 'year' },
            { data: 'make', name: 'make' },
            { data: 'model', name: 'model' },
            { data: 'vin', name: 'vin' },
            { data: 'retail_price', name: 'retail_price' },
            { data: 'internet_price', name: 'internet_price' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ],
        drawCallback: function() {
            // Show tooltips
            $('[data-toggle="tooltip"]').tooltip();

            // Show WebUI-Popover
            $('#dealerInventory').on('draw.dt', function () {
                $('.showPopUp').webuiPopover({
                    title: '',
                    placement: 'left',
                    trigger: 'click',
                    backdrop:true,
                    type: 'html'
                });
            });
        }
    });
});

Here is the magic to show the ToolTips for the other buttons in the actions column:

// Button code for tooltip
<button type="button" class="btn btn-pure btn-xs icon btn-primary" data-toggle="tooltip" data-original-title="Edit Vehicle">
    <i class="icon wb-pencil" aria-hidden="true"></i>
</button>

// Show tooltips
$('[data-toggle="tooltip"]').tooltip();

Here is where we show the WebUI-Popover for the pie icon in the actions column:

// Show WebUI-Popover
$('#dealerInventory').on('draw.dt', function () {
    $('.showPopUp').webuiPopover({
        title: '',
        placement: 'left',
        trigger: 'click',
        backdrop:true,
        type: 'html'
    });
});

That’s a Wrap!

I hope this helps others who have run unto this issue. After searching and putting a few different examples together this is what I came up with. If you know of a way to make this easier, please let me know and I will update this post.

Tags: , , , ,