Question

如果我听起来有点缺乏经验（我是），请耐心等待，但我现在正试图使用Angular2添加工具提示或弹出窗口（任何一个，无关紧要）到td Bootstrap最终摆脱了不必要的列。我希望popover或工具提示在悬停时打开而不是点击。我已尝试通过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 ：要显示的文字
  工具提示展示位置：文本的位置或位置   工具提示触发器：什么会使文字出现（可以是任何事件）

这是example

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

1 个答案: