如何將空白行添加到引導工具提示中

我正在開發一個網站，該網站具有人們可以訂購的不同功能。我想在這些功能旁邊放置一個自舉圖形，然後當用戶滾動顯示圖形時，工具提示會顯示這些功能中包含的內容。我無法在工具提示中引入空白行。我試過了\ n
和&＃013（在我的css中使用pre-wrap命令）以下是我的代碼中對應於工具提示的部分。如何將空白行添加到引導工具提示中

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

我怎樣才能把空行，其中&＃013。值得注意的是，在我加入JQuery部分之前，空白行確實工作正常，但是當我在JQuery部分中添加換行符時，它們被刪除了。

來源

2017-09-13 tgrim90

檢查下面的示例。 – bhansa

設置HTML爲true，並在標題屬性使用<br>，或者你也可以設置數據屬性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

來源

2017-09-13 19:43:57 bhansa

您可以添加<br />

title="1st line of text <br> 2nd line of text" 

    title = 
     "One printed sheet can include <br> 
      1 8 x 10 <br> 
      2 5 x 7 <br> 
      2 4 x 6 <br> 
      4 3.5 x 5 <br> 
      9 wallet photos"

來源

2017-09-13 19:42:07 scaisEdge

add data-html =「true」attribute在數據切換旁邊，然後您可以在標題內的任意位置使用分隔標籤來實現新行

來源

2017-09-13 19:53:29

如何將空白行添加到引導工具提示中

回答

相關問題