jquery - 如何将空行添加到 Bootstrap 工具提示中

Question

我正在开发一个网站，该网站具有人们可以订购的不同功能。我想在这些功能旁边放置一个 bootstrap 字形图标，然后当用户在字形图标上滚动时，工具提示将显示这些功能中包含的内容。我无法在工具提示中引入空行。我试过\n
和 (在我的 css 中使用预包装命令)这是我的代码部分与工具提示相关联。

<br/>2 Printed Sheets
  <a href="#" data-toggle = "tooltip" title = 
    "One printed sheet can include &#013;1 8 x 10 &#013;2 5 x 7 &#013;2 4 x 6 &#013;4 3.5 x 5 &#013;9 wallet photos">
    <span style = "color:white" class="glyphicon glyphicon-question-sign white"></span>
  </a>

我还使用了以下 JQuery 命令:

<script>
  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
  });
</script>

如何在 所在的位置放置空行。值得注意的是，在我添加到 JQuery 部分之前，空行确实可以正常工作，但是当我添加到 JQuery 部分时，换行符被删除了。

Answer 1

将 html 设置为 true 并使用 <br>在 title 属性中，或者你也可以设置 data 属性 data-html="true"

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip({
        html:"true"
    });   
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<h1>Tooltip below</h1>
          <a href="#" data-toggle = "tooltip" data-placement = "down" title="One printed sheet can include &#013;<br></a>1 8 x 10 &#013;<br></a>2 5 x 7 &#013;<br></a>2 4 x 6 &#013;<br></a>4 3.5 x 5 &#013;<br></a>9 wallet photos">
          <span style = "color:white" class="glyphicon glyphicon-question-sign white"></span>Tooltip
        </a>

演示:https://bootsnipp.com/user/snippets/BE2dE