Search code examples
javascripthtmljquerytwitter-bootstrappopover

Adding an href link within a Bootstrap popover

popover

I have used Bootstrap popovers and in this one, I'd like to add an href="somelink". But this seems impossible to do with the current code situation:

 <a 
          tabindex="0" 
          class="btn btn-link" 
          role="button" 
          data-toggle="popover" 
          data-trigger="focus" 
          title="Reaction Time (s)" 
          data-content="Enter the time it takes for a driver to react.
          Reaction times vary with age, distractions, alcohol or drug usage etc.
          The unit is seconds.">
              <i class="far fa-question-circle fa-2x"></i>
            </a>

What do I need to do to get an href into that popover text?

Solution

  • You need to pass html:true while initializing your popover.

    Demo Code :

    $(function () {
$("[data-toggle=popover]").popover({html:true})//add html as true to use html 
});
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<a tabindex="0" class="btn btn-link" role="button" data-toggle="popover" data-trigger="focus" title="Reaction Time (s)" data-content="Enter the time it takes for a driver to react.
          Reaction times vary with age, distractions, alcohol or drug usage etc.
          The unit is seconds <a href='yoururl'>something</a>.">
  <i class="far fa-question-circle fa-2x">Click</i>
</a>

    Also check this for more information.