CODEWITHSUNDEEP
htmlhyperlinktwitter-bootstrap-3popover
user2881809
user2881809

Reputation:

Bootstrap Popover - how to add link in text popover?

I use bootstrap 3 popover.

And now I would like link on text popvover.

Code:

<a href="#" 
  role="button" 
  class="btn popovers" 
  data-toggle="popover" 
  title="" 
  data-content="test content <a href="" title="test add link">link on content</a>" 
  data-original-title="test title"
  >
  test link
</a>

But when I start code in html I see:

<a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content &lt;a href=" "="">link on content</a>
" 
data-original-title="test title"
&gt;
test link

I know that problem in symbol " but i don't know have add link in link...

Tell me please how will be aright code?

P.S.: if question already exist please give me link.

Upvotes: 64

Views: 89738

Answers (7)

Tim S
Tim S

Reputation: 191

If you want to use focus and a link inside the popup you need to prevent the popup to close when clicking inside. The cleanest solution I found was to preventDefault clicks inside a Popup which has the .popover class or any other custom class you define.

$('body')
  .on('mousedown', '.popover', function(e) {
    e.preventDefault()
  });

Upvotes: 7

Daniil Grankin
Daniil Grankin

Reputation: 3933

I used data-trigger="focus" and had an issue with a link in content of popover. If mouse button is clicked on the link and hold for a while then the popover disappears and the link 'doesn't work'. Some clients complained about that.

HTML

<a href="#" role="button" class="btn popovers" data-toggle="popover" data-trigger="focus" title="" data-content="test content <a href='/' title='test add link'>link on content</a>" data-original-title="test title">test link</a>

JS

$("[data-toggle=popover]").popover({html:true})

You can reproduce the problem here.

I used the folowing code to fix the issue:

data-trigger="manual" in html and

$("[data-toggle=popover]")
    .popover({ html: true})
        .on("focus", function () {
            $(this).popover("show");
        }).on("focusout", function () {
            var _this = this;
            if (!$(".popover:hover").length) {
                $(this).popover("hide");
            }
            else {
                $('.popover').mouseleave(function() {
                    $(_this).popover("hide");
                    $(this).off('mouseleave');
                });
            }
        });

Upvotes: 9

Nikhil N
Nikhil N

Reputation: 4577

You'll need to pass html option with value true while initializing popover like following.

Demo

JS:

$("[data-toggle=popover]")
  .popover({html:true})

HTML:

<a
  href="#" role="button" class="btn popovers" data-toggle="popover" title=""
  data-content="test content <a href='' title='test add link'>link on content</a>"
  data-original-title="test title" target="_blank"
>
  test link
</a>

Upvotes: 97

David
David

Reputation: 875

$("body").on("mousedown",".my-popover-content a",function(e){
    document.location = e.target.href;
});

does it for me: basically, take matters into your own hands. Again, this is with popover options html: true, sanitize: false, and trigger : "focus"

Upvotes: 0

Antony
Antony

Reputation: 4344

Its worth noting that whilst the answers given are correct - a link will cause problems when the data-trigger="focus" is applied. As I found out from a client if the click occurs quickly on a popover the link will be actioned, should a user hold down their mousebutton then unfortunately the trigger kicks in and the popover occurs. So in short consider whether a link is necessary and plan for slooow clicks.

Upvotes: 1

user7961627
user7961627

Reputation: 41

<a href="#" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

By simply adding data-html="true" is working with link attribute :)

Upvotes: 4

netAction
netAction

Reputation: 1877

Simply use the attribute data-html="true".

<button
  data-toggle="popover"
  data-content="Link: <a href='xyz.com'>XYZ</a>"
  data-html="true">
  CLICK
</button>

Upvotes: 46

Related Questions