如何在bootstrap popover中添加与var的链接?

时间:2013-03-06 09:24:00

标签: jquery twitter-bootstrap hyperlink tooltip

我尝试使用这个

HTML

<div class="company-logo">
    <a class="popup" href="#" data-toggle="popover" data-content="Download den Mazda Case (.pdf)">
        <img src="img/logo/mazda.png" alt="logo">
    </a>
</div>

JS

$(function () {
    var pop_description = $(this).attr("data-content");
    var pop_link = $(this).attr("href");
    var pop_content = '<a href="' + pop_link + '">' + pop_description + '</a>';


    $('.popup').popover({
        placement: 'top',
        html: true,
        content: pop_description
    });

});

但这是错误的,我还没有定义。我想在popover内容中添加链接

2 个答案:

答案 0 :(得分:1)

您可以创建一个名为&#39; my-popover&#39;

的自定义弹出窗口

HTML

<div class="company-logo">
    <a class="popup" href="#" data-toggle="my-popover" data-content="Download den Mazda Case (.pdf)">
        <img src="img/logo/mazda.png" alt="logo">
    </a>
</div>

JS

$('[data-toggle="my-popover"]').popover({
        'placement': 'top',
        'template':'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div><a href="' + pop_link + '"><div class="popover-content"></div></a></div></div>',
        'html': 'true'
  });

答案 1 :(得分:0)

为什么不尝试这个?

$(function () {
    var pop_description = $(this).attr("data-content");
    var pop_link = $(this).attr('href','http://example.com');
    var pop_content = '<a href="' + pop_link + '">' + pop_description + '</a>';
alert(pop_content);

    $('.popup').popover({
        placement: 'top',
        html: true,
       // content: pop_description
    });

});

我希望我能告诉你你想做什么?