Bootstrap-table: Bootstrap tooltip not working inside table

[iamthestreets]

Hi I am using a function that I saw from one of your example which is to display action buttons. I am having a problem with the bootstrap tooltip working on these buttons.

Here is the JS:

function actionsFormatter(value, row, index) {
        if (row.id == 1 || row.id == 2) {
             return [
                '<a class="btn btn-primary btn-xs mr10" data-tooltip="true" data-placement="bottom" href="admin_permission.php?id='+row.id+'" title="Edit">',
                    '<i class="glyphicon glyphicon-pencil"></i>',
                '</a>',
                '<a class="btn btn-danger btn-xs disabled" data-tooltip="true" data-placement="bottom" href="#" title="Remove">',
                    '<i class="glyphicon glyphicon-trash"></i>',
                '</a>',
            ].join(''); 
        } else {
                return [
                    '<a class="btn btn-primary btn-xs mr10" data-tooltip="true" data-placement="bottom" href="admin_permission.php?id='+row.id+'" title="Edit">',
                        '<i class="glyphicon glyphicon-pencil"></i>',
                    '</a>',
                    '<a class="btn btn-danger btn-xs remove" data-tooltip="true" data-placement="bottom" href="#" title="Remove">',
                        '<i class="glyphicon glyphicon-trash"></i>',
                    '</a>',
                ].join('');
        }
    }
window.actionsEvents = {
        'click .remove': function (e, value, row, index) {
            // Open modal on click
            $('#deleteModal').modal();
            // Add permission names to modal
            $('#permission-name').text('Are you sure you want to delete: ' + row.name + '?');
            // Create a hidden input to use when submitting form
            var input = document.createElement("input");
            input.setAttribute('type', 'hidden');           
            input.setAttribute('name', 'delete['+row.id+']');
            input.setAttribute("id", 'delete['+row.id+']');            
            input.setAttribute('value', row.id);         
            //append to form element that you want .
            document.getElementById("deleteModalForm").appendChild(input);  

            console.log(value, row, index);
        }
    };

And the I have this to activate the tooltips:

$('[data-tooltip="true"]').tooltip({
        container: 'body'
    });

The tooltip works fine on the toolbar, but does not work for these buttons. Can you see why this doesn't work?
Here is a JSFiddle. Notice that the top let button has the bootstrap tooltip, but the action buttons in the table does not work.

[wenzhixin]

You need to active the tooltip after table body is rendered: http://jsfiddle.net/e3nk137y/791/.

[PlippiePlop]

bootstrap table is messing around with items inside table TH/TD tags. It removes 'title' or changes the 'data-original-title' to data-originaltitle'.

See example here with bootstrap tables: (inspect the TH and TD elements all items removed)
https://jsfiddle.net/zac8z18m/1/

And without bootstrap tables here:
https://jsfiddle.net/8dou6d7u/1/

[rwitchell]

this is still an issue. @wenzhixin, could you please offer advice?
data-toggle does not render as a property on the in the DOM.

<th data-field="incomplete"
            data-sortable="true"
            data-halign="center"
            data-align="center"
            data-toggle="tooltip"
            data-title-tooltip="Incomplete">I
        </th>

$(function () {
        // Initiate table once page has rendered
        $('#activeReportDataTable').bootstrapTable({

        }).on('post-body.bs.table', function () {
            // need to re-render tooltip when table is modified/sorted
            activateTooltips();
        });

        activateTooltips();
    });

function activateTooltips() {
        var opt = {
            container: 'body'
        };
        $('[name="refresh"]').tooltip(opt);
        $('div.btn-group > [title="Columns"]').tooltip(opt);
        $('div.btn-group > [title="Export data"]').tooltip(opt);
        $('th[data-toggle="tooltip"]').tooltip(opt);
        return true;
    }

[JTCE]

@rwitchell @wenzhixin I run into this the other day and it is indeed an issue but appears directly related with data-toggle="table" and the post.body... events. After diving into the source code, it looks like the data-* attribute logic, similar to that in the rows, is missing from the header.

Unfortunately I had to work around this by using a "class" as that was being maintained in the headers. Here's a working fiddle: Bootstrap Table Tooltip Example
Note: the logic for updating textarea tooltip (live changes) within each table row is not functioning but I left the code there anyway. I can assure you it's the exact version I'm using right now in live projects but for whatever reason, jsFiddle is not working with :hover inside a table. Mind-boggling!

Always open for feedback and hope this helps!

[rwitchell]

Until this is fixed in the source, the easiest work around for the time being is placing a div inside your header:
````

````