web-dev-qa-db-ja.com

Bootstrapツールチップに長いテキストを表示する

Twitter bootstrapツールチップに少し長いテキストを表示しようとしています。下の写真でわかるように、物事は途方もなく行きません。 bootstrapツールチップをオーバーフローするテキストの簡単な修正はありますか？

tooltip overflow

編集（要求されたコードを追加）：

私のコントローラーで：

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

私からしてみれば：

$('.auto-tooltip').tooltip();
jquerycsstwitter-bootstraptwitter-bootstrap-tooltip
47
Jeff Borden

あなたのコードについてはよくわかりませんが、
これは、ツールチップの値が長い例です。

要素：

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

デモ： JsBin.comで

明らかに、Bootstrap 4の.tooltip-innerのみを変更できます。ありがとう@Felix Dombek

.tooltip-inner { max-width: ... }
95
funerr

ドキュメントで で示唆されているように、ツールチップがまったくラップしないようにする最も簡単な方法は、

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

これにより、ディメンション値などを心配する必要はありません。主な問題は、非常に長いテキスト行がある場合、画面から消えてしまうことです（ JSBin Example を参照）。

28
cmcculloh

より良い結果を得るには、このソースを使用できます。

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

enter image description here

6
dr. Neox

スタイルシートで.tooltip-innerをスタイリングする代わりに、ツールチップのテンプレートを変更することで、 tooltip にスタイルを直接追加できます。

ほとんどの場合、要素にスタイルを直接適用するため、これはおそらく良いアイデアではありませんが、これが唯一のオプションであるか、何らかの理由で最良のオプションである少数のケースでは可能です。

$(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;
}
2
Nate