Search code examples
htmlhyperlinktwitter-bootstrap-3popover

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.


Solution

  • 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>