Title (tooltip) in the button from the ColumnSelector of TableSorter JQuery

Question

https://mottie.github.io/tablesorter/docs/example-widget-column-selector.html

From this pluggin of JQuery, I'm using this functionality that allows you to show and hide the columns you like.

The problem is that if I add title="whatever" to the button with the id="popover" the title goes inside the modal on the top part. Could be a good functionality for anyone but I need to show the usual tooltip with the content of the title attribute that normaly appears when you hover the button.

How can I recover the normal functionality to be able to see the tooltip as normally does?

    <!-- Bootstrap popover button -->
    <button id="popover" class="btn btn-primary">
         Show/hide column
    </button>
    <div class="hidden">
         <div id="popover-target"></div>
    </div>


    //SHOW/HIDE COLUMNS
    $.tablesorter.columnSelector.attachTo( $('.bootstrap-popup'), '#popover-target');
    $('#popover')
        .popover({
            placement: 'right',
            html: true, // required if content has HTML
            content: $('#popover-target')
        });

Answer 1

The example code is using Bootstrap's popover to show the column selector menu. If you want to add a tooltip, then initialize Bootstrap's tooltip before the popover code (demo)

$(function() {
  $(".bootstrap-popup").tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'columnSelector', 'stickyHeaders']
  });

  // call this function to copy the column selection code into the popover
  $.tablesorter.columnSelector.attachTo($('.bootstrap-popup'), '#popover-target');

  $('[title]').tooltip();
  $('#popover').popover({
    placement: 'right',
    html: true, // required if content has HTML
    content: $('#popover-target')
  });

});