How to apply bootstrap.tooltips plugin to elements dynamically generated?

Question

I am trying to create dynamic td elements using Datatables from an AJAX feed.

Here is the relevant aoColumnDefs for the column:

"aoColumnDefs": [
    {
        "mRender":function(data, type, row) {
            return '<td class="ms">' +
                        '<div class="btn-group1">' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="left" data-original-title="Edit">' +
                                '<i class="gicon-edit"></i>' +
                            '</a> ' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="top" data-original-title="View">' +
                                '<i class="gicon-eye-open"></i>' +
                            '</a>' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="bottom" data-original-title="Remove">' +
                                '<i class="gicon-remove"></i>' +
                            '</a>' +
                        '</div>' +
                    '</td>';
        },
        "aTargets":[7]
    },

As you can see I need to process this after the row is created to apply the bootstrap.tooltips plugin to the <a> elements.

Here is what I have tried, amongst other combinations of jQuery selectors:

"fnCreatedRow": function(nRow, aData, iDataIndex) {
    $("a").tooltip();
},

Nothing I have tried has worked in attempting to get the plugin to enhance my buttons and have the tooltips appear on hover, they have the correct CSS so they aren't invisible because this exact HTML and CSS works in a static HTML file without the dynamic creation of the elements.

Answer 1

I believe you can make tooltips work with an ajax data source by using mRender and fnCreatedCell. Note the datatables reference page and compare fnCreatedCell with fnCreatedRow.

HTML

<table id="example" class="table table-condensed">
    <thead>
        <tr>
            <th>Vegetable</th>
            <th>Fruit</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

JavaScript (or at least the pertinent part of calling datatables)

$('#example').dataTable({
    "aaData": aaData,
    // other set up for datatables left out for the sake of getting to the main issue...
    "aoColumnDefs": [
        { "aTargets": [0],
            "mData": "VegetableName",
            "sWidth": "150px"
        },
        { "aTargets": [1],
            "mData": "FruitName",
            "sWidth": "150px"
        },
        { "aTargets": [2],
            "mData": "LoansOpenedThisDay",
            "mRender": function (data, type, full) {
            // Note: 
            // not manually coding the '<td>' as in the question.           
                return   '<div class="btn-group1">' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="left" data-original-title="Edit">' +
                                '<i class="gicon-edit"></i>' +
                            '</a> ' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="top" data-original-title="View">' +
                                '<i class="gicon-eye-open"></i>' +
                            '</a>' +
                            '<a class="btn btn-small" rel="tooltip" data-placement="bottom" data-original-title="Remove">' +
                                '<i class="gicon-remove"></i>' +
                            '</a>' +
                        '</div>';               
            },
            "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                //  console.log( nTd );
                $("a", nTd).tooltip();
            }
        }
    ],
    // more datatables set up...