在 Bootstrap 弹出窗口中添加 href link

Question

我已经使用了 Bootstrap 个弹出窗口，在这个弹出窗口中，我想添加一个 href="somelink"。但这似乎与当前的代码情况无关：

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

我需要做什么才能在该弹出窗口文本中获取 href？

Answer 1

您需要在初始化弹出窗口时传递 html:true。

演示代码 :

$(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>

另请查看 this 了解更多信息。

Answer 2

尝试将选项 html 设置为 true 并将 sanitize 设置为 false

https://getbootstrap.com/docs/4.3/getting-started/javascript/#sanitizer

$('[data-toggle="popover"]').popover({
  sanitize: false
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<a tabindex="0" class="btn btn-link" role="button" data-toggle="popover" data-html="true" 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='https://whosebug.com/'>Go</a>">
  <i class="far fa-question-circle fa-2x"></i>?
</a>

Answer 3

你需要这个吗？

$("#testpopover").popover({
 html: true,
 title:"React time(s)",
 content: "Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum."+
 "<a class='btn btn-default'>HTML in popover</a>"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div style="width:100%; height:500px; margin-top:15%">
<a type="button" class="btn btn-default" id="testpopover">popover</a>
</div>

在 Bootstrap 弹出窗口中添加 href link

Adding an href link within a Bootstrap popover

html

javascript

jquery

popover

twitter-bootstrap