2017-09-13 32 views
0

私は人が注文できるさまざまな機能を持つWebサイトで作業しています。これらの機能の横にブートストラップグリフコンを置きたいと思います。ユーザーがグリフコンをロールオーバーすると、その機能に含まれているものがツールチップに表示されます。 ツールチップに空白行を挿入する際に問題があります。私は試しました\
と&#013(私のCSSでpre-wrapコマンドで)ここに私のコードのツールチップに対応する部分です。ブートストラップのツールチップに空白行を追加するには

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

&#013がどこにあるか、私は空白行を置くことができる方法:

<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のコマンドを使用しています。 JQueryセクションに追加する前に、空白行は正常に機能していましたが、JQueryセクションに追加したときに改行が削除されていたことは注目に値します。

+0

以下の例を確認してください。 – bhansa

答えて

2

を追加することができ、またはあなたはまた、データの属性に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

1

デモあなたはtrueにHTMLを設定し、title属性で<br>を使用<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" 
0

add data-html = "true"属性データトグルの横に配置して、タイトルの中に改行タグを使用して新しい行を実装することができます

関連する問題