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

最好使用表格标题demo上的data-placeholder属性向过滤器添加占位符

<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']
    });

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

1 个答案: