javascript - 在 Bootstrap Popover 中插入图像

Question

我正在使用Bootstrap Popver 。我已在弹出窗口中插入了一些数据，并且还想插入图像。这是我尝试过的。

代码:

var img = '<div id = "image"><img src = "http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" /></div>';
var button = "<button title = " + obj.hostname + "&#44;&#32;" + gpu.toUpperCase() +
        " data-content = \"" + metric_name[metric] + ":&#32;" + display_val + img + "\"" +
        " data-id=\"" + detailed_summary + "\"" +
        " data-text = \"" + obj.hostname + ", " + gpu.toUpperCase() + ", " + metric_name[metric] + ":&#32;" + display_val + "\"" +
        " class=\"btn " + button_state + " gpu btn-lg open-InfoModal\"" +
        " data-toggle=\"modal\" " +
        " data-html=\"true\" " +
        " rel=\"popover\" " +
        " data-target=\"#hostInfo\" " +
        " href=\"#infoModal\"></button>";

初始化:

$('button').popover({
            trigger: "hover",
            placement: get_popover_placement,
            html: true
});

我在 Stack Overflow 上看到过一些示例，但它对我来说不起作用，因为我想将其插入按钮声明中。

Answer 1

利用弹出窗口函数的content设置:

$('button').popover({
            trigger: "hover",
            placement: get_popover_placement,
            html: true,
            content: img //loads the image inside the popover container
});

<强> DEMO