javascript - 如何使用 Angular2 和 Bootstrap 将工具提示/弹出框添加到表数据中？

Question

如果我听起来有点缺乏经验(我确实是这样)，请耐心等待，但我目前正在尝试使用 Angular2 和 Bootstrap 将工具提示或弹出框(两者之一，并不重要)添加到 td 中，以最终获得去掉不必要的列。我希望弹出窗口或工具提示在悬停时打开，而不是在单击时打开。我尝试按照此处另一篇文章的建议通过 nodejs 安装 ng2-popover 模块，但无济于事。这是我的表格开头的简化版本:

<table class="table table-striped table-bordered table-hover">
<tbody><tr>
<th>Table Name</th>
<th> Max As Of Date </th>
<th> Row Count for Date</th>
<th> Comments </th><th>
<td> Table Data </td>

最初向其他人推荐使用 ng2-popover 模块而不是 JQuery 的人建议如下:

<span popover="content to be shown in the popover">
element on which this popover is applied.
</span>

但是，当我在那里放入 td 时，这对我不起作用。如果您知道如何执行此操作，请提前致谢!

Answer 1

您可以使用 Angular 的 Bootstrap :https://angular-ui.github.io/bootstrap/#/tooltip

已经具有适用于 Angular 的工具提示功能。

<div class="form-group" ng-class="{'has-error' : !inputModel}">
      <label>Disable tooltips conditionally:</label>
      <input type="text" ng-model="inputModel" class="form-control"
             placeholder="Hover over this for a tooltip until this is filled"
             uib-tooltip="Enter something in this input field to disable this tooltip"
             tooltip-placement="top"
             tooltip-trigger="mouseenter"
             tooltip-enable="!inputModel" />
    </div>

Just adding the directive like:

uib-tooltip: text to display
tooltip-placement: place or where will the text will be positioned
tooltip-trigger: what will make the text appears (can be any event)

这里有一个example