如何创建JQuery tablesorter插件的过滤器小部件的工具提示？ [英] How to create a tooltip for the filter widget of the JQuery tablesorter plugin?

问题描述

可能相关的问题： jquery tablesorter添加标题/工具提示显示升序/降序

下面是我试过的HTML：

 < table class =tablesorterid =table1> 
< thead> 
< tr> 
  < / tr> 
< / thead> 
< tbody> 
< tr>< td> 1< / td>< td> 2< / td>< / tr> 
< tr>< td> 3< / td>< td> 4< / td>< / tr> 
< / tbody> 
< / table> 
  

和JS：

主题：'ice'，
 cssInfoBlock：'tablesorter-no-sort'，
 widgets：['code> $（'＃table1' zebra'，'stickyHeaders'，'filter'] 
}）; 
  

标题部分起作用。我不喜欢的是过滤器文本框上的鼠标悬停文本。我不想手动拦截这些事件。

解决方案

使用<$表头上的c $ c> data-placeholder 属性（ demo ）

 < th data-placeholder =搜索字母数字> AlphaNumeric< / th>但是，如果你真的想要一个工具提示出现，然后尝试这个代码（ demo ）： 
 
 
 HTML 
 < th data-filter-title =Search Alphanumeric> AlphaNumeric< / th> 
  
脚本 
 
 
  .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'] 
}）; 
  
 
Possibly related question: jquery tablesorter add title/tooltip to show ascending/descending


Below is HTML that I tried:
<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>
And the JS:
$('#table1').tablesorter({
    theme : 'ice',
    cssInfoBlock : 'tablesorter-no-sort',
    widgets: ['zebra', 'stickyHeaders', 'filter']
});
The title portion works. What I do not gte is a mouseover text over the filter text box. I do not want to intercept those events manually.
解决方案
It might be better to add a placeholder to the filter using a data-placeholder attribute on the table header (demo)
<th data-placeholder="Search Alphanumeric">AlphaNumeric</th>
But if you truly want a tooltip to appear, then try this code (demo):

HTML
<th data-filter-title="Search Alphanumeric">AlphaNumeric</th>
Script
$('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插件的过滤器小部件的工具提示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！