弹出式窗口未显示在表格行内的按钮中

Question

I have a table being built via the map function of JavaScript (ReactJS).

On the last column, I should be having buttons that are meant to open a popover that will (eventually) hold some information. This cell is being done like this:

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

So far, the said button appears, but no popover whatsoever. I'm not using npm or anything of the sorts since I'm not a front-end-designer myself, and that doesn't seem trivial to setup. I just want something "good enough" for testing purposes.

What am I missing?

Answer 1

The names of your attributes imply that you are expecting bootstrap (an external library) to be loaded and attach to the element to provide functionality, is bootstrap included in a script tag on the page? Those attributes don't do anything themselves, they are just tags to attach actions to. Add a bootstrap cdn tag inside the bottom of the body tag to address.

Answer 2

Looking at your https://pastebin.com/KuRHjWxr . Popovers won't work, you have to implement them other way. You initiate $('[data-toggle="popover"]').popover(); $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="popover"]').popover(); $('[data-toggle="tooltip"]').tooltip(); when there are no buttons in DOM.

Call .popover() and .tooltip() after your buttons are successfully rendered to the DOM.