【问题标题】:Title (tooltip) in the button from the ColumnSelector of TableSorter JQueryTableSorter JQuery的ColumnSelector按钮中的标题(工具提示)
【发布时间】:2018-01-18 12:55:05
【问题描述】:

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

从这个 JQuery 插件中,我使用了这个功能,它允许您显示和隐藏您喜欢的列。

问题是,如果我将 title="whatever" 添加到 id="popover" 的按钮,标题会进入顶部的模态。对任何人来说都可能是一个很好的功能,但我需要显示通常的工具提示,其中包含在您悬停按钮时通常会出现的 title 属性的内容。

如何恢复正常功能才能正常查看工具提示?

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

【问题讨论】:

  • @Mottie 如果你能帮助我会很高兴。

标签: jquery tooltip tablesorter


【解决方案1】:

示例代码使用 Bootstrap 的popover 来显示列选择器菜单。如果要添加工具提示,则初始化 Bootstrap 的 tooltipbefore 弹出框代码 (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')
  });

});

【讨论】:

  • 非常感谢 Mottie 的回答。显然我没有使用引导程序中的工具提示。最后我可以通过添加以下行来解决问题: $('#popover').attr('title', 'whatever');在前面的代码之后。
猜你喜欢
  • 2012-02-20
  • 2011-10-02
  • 1970-01-01
  • 2012-09-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-10-09
相关资源
最近更新 更多