How can I add link with var in bootstrap popover?

Question

I try use this one

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
    });

});

But it's wrong, and I have undefined. I want to add link into popover content

Answer 1

You could create a custom popover called 'my-popover'

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'
  });