弹出窗口未显示在 table 行内的按钮中

Question

我有一个 table 正在通过 JavaScript (ReactJS) 的 map 函数构建。

在最后一栏中，我应该有一些按钮，这些按钮旨在打开一个将（最终）保存一些信息的弹出窗口。这个单元格是这样完成的：

<td>
    <div>
        <button className="btn btn-primary"
                tabIndex="0"
                role="button"
                data-toggle="popover"
                data-trigger="focus"
                title="Details"
                data-content="Testing, Testing">
               <b>IN PIT</b>
         </button>
    </div>
</td>

到目前为止，出现了上述按钮，但没有弹出窗口。我没有使用 npm 或任何类似的东西，因为我自己不是前端设计师，而且设置起来似乎并不简单。我只是想要一些东西 "good enough" 用于测试目的。

我错过了什么？

Answer 1

您的属性名称暗示您期望 bootstrap（外部库）被加载并附加到元素以提供功能，bootstrap 包含在页？这些属性本身不做任何事情，它们只是附加动作的标签。在 body 标签底部添加一个 bootstrap cdn 标签来地址。

Answer 2

看着你的https://pastebin.com/KuRHjWxr。弹出窗口不起作用，您必须以其他方式实现它们。你发起 $('[data-toggle="popover"]').popover(); $('[data-toggle="tooltip"]').tooltip(); 当 DOM 中没有按钮时。

在按钮成功呈现到 DOM 后调用 .popover() 和 .tooltip()。

弹出窗口未显示在 table 行内的按钮中

Popover not showing in button inside table row

javascript

html

reactjs

react-jsx