如何使用Angular2和Bootstrap向表数据添加工具提示/弹出？

Question

如果我听起来有点缺乏经验(我是这样的)，请容忍我，但我目前正在尝试在td中添加工具提示或弹出(这两者都不重要)，使用Angular2和Bootstrap来最终消除不必要的列。我希望弹出或工具提示打开在悬停而不是点击。我尝试通过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

您可以使用角的引导程序：https://angular-ui.github.io/bootstrap/#/tooltip

已经有适合于tooltip角度的特性。

<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>

只要添加指令，如下所示： uib-工具提示：要显示的文本 tooltip-placement：位置或文本将定位在何处 使文本出现的tooltip-trigger：(可以是任何事件)

这里是一个示例