彈出式窗口未顯示在表格行內的按鈕中

Question

我有一個通過JavaScript的map函數（ReactJS）構建的表。

在最后一列上，我應該有一些按鈕用來打開一個（最終）保存一些信息的彈出窗口。 這個單元格是這樣完成的：

<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或任何種類的東西，並且設置似乎並不簡單。 我只想要“足夠好”的東西用於測試。

我想念什么？

Answer 1

屬性名稱暗示您期望引導程序（外部庫）被加載並附加到元素上以提供功能，引導程序是否包含在頁面的腳本標記中？ 這些屬性本身不做任何事情，它們只是將動作附加到的標簽。 在body標簽底部添加一個bootstrap cdn標簽以進行尋址。

Answer 2

查看您的https://pastebin.com/KuRHjWxr 。 彈出式窗口不起作用，您必須以其他方式實現它們。 您啟動$('[data-toggle="popover"]').popover(); $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); $('[data-toggle="tooltip"]').tooltip(); 當DOM中沒有按鈕時。

將按鈕成功呈現到DOM后，調用.popover()和.tooltip() 。