如何为 JQuery tablesorter 插件的过滤器小部件创建工具提示？

Question

可能相关的问题：jquery tablesorter add title/tooltip to show ascending/descending

以下是我尝试过的 HTML：

<table class="tablesorter" id="table1">
     <thead>
         <tr>
             <th title="this is title for the header" data-title="I want this to be title for the filter">Column1</th>
             <th title="this is title for the header" data-title="I want this to be title for the filter">Column2</th>
         </tr>
     </thead>
     <tbody>
         <tr><td>1</td><td>2</td></tr>
         <tr><td>3</td><td>4</td></tr>
     </tbody>
 </table>

还有 JS：

$('#table1').tablesorter({
    theme : 'ice',
    cssInfoBlock : 'tablesorter-no-sort',
    widgets: ['zebra', 'stickyHeaders', 'filter']
});

标题部分有效。我不知道的是过滤器文本框上的鼠标悬停文本。我不想手动拦截这些事件。

Answer 1

最好使用表头上的data-placeholder 属性向过滤器添加占位符 (demo)

<th data-placeholder="Search Alphanumeric">AlphaNumeric</th>

但如果您真的希望出现工具提示，请尝试以下代码 (demo)：

HTML

<th data-filter-title="Search Alphanumeric">AlphaNumeric</th>

脚本

$('table')
    .on('filterInit', function() {
        var c = this.config;
        c.$headers.each(function(i){
            c.$filters.eq(i).attr( 'title', $(this).attr('data-filter-title') );
        });
    })
    .tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'filter']
    });