悬停表头流星

Question

我有以下的html

<th  scope="col" class="table-success titlerow featurecol"
     id='headerPop'>
    Some Text Header
    <sup>
        <a href='' class="fas fa-info"></a>
    </sup>
</th>

和Meteor的javascript文件

Template.nameTemplate.events({ 
'mouseenter #headerPop':async function (event,instance){

      instance.$(event.currentTarget).popover({
        html:true,
        title:'The title',
        content:'Some text here'

      })
}
})

我需要每次用户在表头列上悬停时，弹出信息，但似乎从来没有出现过，这里有什么问题？

Answer 1

我需要每次用户在表头列上停留时，弹出信息。

这表明： 你需要一个事件 触发弹出窗口，而不是用 onRendered 回调（就是 不用于控制事件流程).

悬停 "功能可以通过使用 mouseover 或 mouseenter (你需要找出适合你的需求，但。mouseenter 似乎是个不错的选择）。)

Template.nameTemplate.events({
  'mouseenter th' (event, templateInstance) {
    const title = templateInstance.title.get()
    templateInstance.$(event.currentTarget).popover({ title })
  }
})

你可以在这里玩玩选择器，在例子中是这样的 th 但你可以使用类选择器指定一个更窄的范围。