Вставить изображение во всплывающее окно Bootstrap

Я использую 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, но у меня это не сработало, так как я хочу вставить его в объявление кнопки.


javascript jquery twitter-bootstrap bootstrap-popover
person user2798227    schedule 13.05.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Воспользуйтесь параметром content всплывающей функции:

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

ДЕМО

person AyB    schedule 13.05.2014
comment
Я знаю, что мог бы это сделать, и это работало с этим, но у меня есть некоторые переменные, которые мне также нужно показать вместе с контентом. Вот почему я сказал, что должен использовать его внутри кнопки. - person user2798227; 13.05.2014
comment
@user2798227 user2798227 Как на изображении кнопки? Если да, является ли переменная динамической и всегда ли она идет с <div>? - person AyB; 13.05.2014
comment
Нет, как в кнопке с данными + изображением во всплывающем окне и модальным при нажатии. Я решил это, спасибо за вашу помощь. Я опубликую свой ответ здесь. - person user2798227; 13.05.2014

arrow_upward
2
arrow_downward

Я решил это, используя приведенный ниже код.

   button = "<button title = " + obj.hostname + "&#44;&#32;" + gpu.toUpperCase() +
           " data-content = \"" + returnPOContent(metric_name[metric], display_val) + "\"" +
       //" data-content = \"" + metric_name[metric] + ":&#32;" + display_val + "\"" +
        " 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>";

function returnPOContent(mName, dVal) {
    var popOverContent = mName + ": " +dVal+"</br><div id='test'><img src='http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg'/></div>"; 

    return popOverContent;
}

    $("button").popover({
            trigger: "hover",
            placement: get_popover_placement,
            html: true
      });
person user2798227    schedule 13.05.2014