ブートストラップのツールチップに長いテキストを表示

Question

私は、長いテキストの一部をTwitterのブートストラップのツールチップに表示しようとしています。あなたが下の図に見られるように、物事は激しく行かない。誰かが簡単にブートストラップのツールチップをオーバーフローさせるテキストを修正していますか？

EDIT（追加要求されたコード）：私のコントローラで

：私の見解では

<a href='" + Url.Action("Index", "PP", new {id = productRow.ProductGuid, area = ""}) + "' " + 
      ((blTruncated) ? "class='auto-tooltip' title='" + productRow.ProductName.Replace("'", "") : "") + "'>" + 
      productName + "</a> 

：

$('.auto-tooltip').tooltip(); 

Answer 1

私はあなたについてかなりよく分かりませんコード、
ここでは、長いツールチップ値：

要素：

<a href="#" rel="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ac felis id commodo. Etiam mauris purus, fringilla id tempus in, mollis vel orci. Duis ultricies at erat eget iaculis.">Hover here please</a> 

のJs：

$(document).ready(function() { 
    $("a").tooltip({ 
    'selector': '', 
    'placement': 'top', 
    'container':'body' 
    }); 
}); 

のCss：

/*Change the size here*/ 
div.tooltip-inner { 
    max-width: 350px; 
} 

デモ：0 in the documentationを示唆したよう

Answer 2

、あなたのツールチップがすべてでラップしていないことを保証する最も簡単な方法は、これにより

 .tooltip-inner { 
      max-width: none; 
      white-space: nowrap; 
     } 

を使用することで、あなたは、ディメンション値またはそのような何も心配する必要はありません。主な問題は、テキストの長い行がある場合は、画面の外に出るだけです（JSBin Exampleで確認できます）。

Answer 3

あなたはより良い結果を得るため、このソースを使用することができます。あなたがツールチップのテンプレートを変更することによって、tooltipに直接スタイルを追加することができますスタイルシートで.tooltip-innerをスタイリングするための代替案として

.tooltip-inner { 
word-break: break-all; 
} 

Answer 4

を。

これは、要素に直接スタイルを適用するため、ほとんどの場合はお勧めできませんが、これが唯一のオプションである場合や何らかの理由で最適な場合オプション。

$(selector).tooltip({ 
    title: "Lorem ipsum ...", 
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>', 
}); 

あるいは、属性など：

<span 
    data-toggle="tooltip" 
    title="Lorem ipsum ..." 
    data-template='<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>' 
    >Some abbreviation</span> 

$(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 

templateオプション：

ベースHTMLツールヒントを作成するときに使用します。

ツールチップのtitleは.tooltip-innerに注入されます。

.tooltip-arrowは、ツールチップの矢印になります。

最も外側のラッパー要素は、.tooltipクラスである必要があります。

デフォルト：別の方法として

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' 

は、テンプレートやスタイルカスタムクラスに独自のクラスを追加することができます。

$(selector).tooltip({ 
    title: "Lorem ipsum ...", 
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner my-custom-tooltip"></div></div>', 
}); 

.my-custom-tooltip { 
    max-width: none; 
}