ブートストラップ ツールチップには、行の折り返しと左揃えの実装方法が表示されます。

Bootstrap のツールチップ機能を使用すると、改行が失われ、テキストが左揃えにならないという小さな問題が発生しました。この記事では、Bootstrap ツールチップでの改行と左揃えの表示に関する解決策を中心に紹介します。興味のある方はぜひ参考にしてください。

今日、Bootstrap のツールチップ機能を使用しているときに 2 つの小さな問題に遭遇しました。それは、改行が欠落していることと、テキストが左揃えではないことです。その後、Baidu と Bing を通じて解決策を見つけました。

まず、Bootstrap でツールチップを表示するためのコードを見てください:

<link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>
<script src="res/jquery.min.js" type="text/javascript"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script>
 $(function () {
  $('[data-toggle="tooltip"]').tooltip();
 });
</script>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="${desc}">${title}</button>

ここでの ${desc} と ${title} は SpringMVC バックグラウンドから渡されるデータであることに注意してください。

これは Bootstrap Tooltip の最も基本的なコードであり、前述した 2 つの問題を引き起こします。

改行の問題

改行に遭遇したとき、私たちが最初に考えることは、「n」を「
」に置き換えることです。私も同じことをしましたが、残念ながらツールチップでは機能しません。ツールチップには「
」がテキストとして直接表示されます。

つまり、HTML はツールチップでは機能しません。幸いなことに、ツールヒントで HTML を使用して「
」を機能させることができる data-html 属性を見つけました。 data-html="true" を追加すると、行の折り返しが機能します。次のコードを参照してください。

<button type="button" class="btn btn-default" data-html="true" data-toggle="tooltip" data-placement="left" title="${fn:replace(desc, newline, "<br/>")}">${title}</button>

左揃え

HTML に基づいて機能した後は、表示するコンテンツを < に置くのがはるかに簡単です。 ;p align='left'>...

中。

<button type="button" class="btn btn-default" data-html="true" data-toggle="tooltip" data-placement="left" title="<p align=&#39;left&#39;>${fn:replace(desc, newline, "<br/>")}</p>">${title}</button>

理由が何であれ、

が機能しない場合は、まだ多くのオプションがあります:

<style> 
 .tooltip > p {
  text-align:left;
 }
</style>
.tooltip-inner {
  text-align:left;
}

関連する推奨事項:

Vue コンポーネントのツールチップ インスタンスの詳細な説明

ネイティブJavaScript実装の詳しい説明ツールチップフローティングプロンプトボックス特殊効果のグラフィックコード

ツールチップ要素の配置と表示機能のjQuery実装例

以上がブートストラップ ツールチップには、行の折り返しと左揃えの実装方法が表示されます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。