当基于该列对表进行排序时,reactive-table列标题中的工具提示停止工作

[英]Tooltip in reactive-table column header stops working when sorting the table based on that column


I'm creating a table using the reactive-table package and running into an issue with adding a tooltip to the title. Basically I'm trying to have a tooltip in my column title that way when a user puts their cursor over it a little bit of information about the column will popup. Here is what I have to make this work:

我正在使用reactive-table包创建一个表,并在向标题添加工具提示时遇到问题。基本上我正试图在我的列标题中有一个工具提示,当用户将光标放在它上面时会弹出一些关于该列的信息。以下是我必须做的工作:

{ key: 'example',
  label: function () { 
    return new Spacebars.SafeString('<span data-toggle="tooltip" title="This is some example text for the tooltip!">Example Title </span>'); 
  }
},

To initialize the tooltip:

要初始化工具提示:

Template.myTemplate.onRendered(function() {
    // Tooltip
    $("[data-toggle=tooltip]").tooltip();
});

When I first refresh the page it works exactly as it should and when I put my cursor over the title the tooltip appears. The issue I am having is when I click on that title to sort the table rows based on that column, when I do this the tooltip stops working. I can click on any of the other column titles and sort the table rows based on those and it will still work, but when I click this one with the tooltip it causes the tooltip to not work anymore unless I refresh the page.

当我第一次刷新页面时,它完全按照预期工作,当我将光标放在标题上时,工具提示出现。我遇到的问题是当我单击该标题以根据该列对表行进行排序时,当我这样做时,工具提示停止工作。我可以点击任何其他列标题并根据这些列对表行进行排序,它仍然可以工作,但是当我用工具提示单击它时,它会导致工具提示不再工作,除非我刷新页面。

Any ideas on why this would be happening or how I could fix it?

关于为什么会发生这种情况或如何解决这个问题的任何想法?

1 个解决方案

#1


0  

I solved this issue by using a template for my label and putting the tooltip inside of that rather than using a function. I then placed the tooltip initialization JS inside of that template.onRendered.

我通过为我的标签使用模板并将工具提示放在其中而不是使用函数来解决了这个问题。然后我将工具提示初始化JS放在该template.onRendered中。

Example:

.html

<template name="myColumnLabel">
    <span data-toggle="tooltip" title="This is some example text for the tooltip!">Example Title</span>
</template>

.js

Template.myColumnLabel.onRendered(function() {
    // Tooltip
    $("[data-toggle=tooltip]").tooltip();
});

.js (reactive table)

.js(反应表)

{ key: 'example', label: Template.myColumnLabel }
关注微信公众号

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/05/30/4d87989559205c2976fb2b70e9ce4e96.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com