179

TwitterBootstrapを使用してツールチップを作成しました。

ツールチップは3行で表示されています。ただし、ツールチップを1行だけで表示したいと思います。

ツールチップの幅を変更するにはどうすればよいですか？これはTwitterBootstrapに固有ですか、それともツールチップ自体に固有ですか？

4

21 に答える 21

229

bootstrap.css を上書きするだけ

BS2 のデフォルト値は max-width:200px です。したがって、ニーズに合ったもので増やすことができます。

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}
于 2013-05-27T08:07:46.863 に答える
54

BS3で

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}
于 2014-02-09T00:47:26.987 に答える
41

これは非常に古い質問だと思いますが、私がここにたどり着いたら、他の人もそうするでしょう. だから私は私が体重を量ると考えました。

追加するコンテンツの量に関係なく、ツールチップを 1 行にのみ応答させたい場合は、幅を柔軟にする必要があります。ただし、Bootstrap はツールチップを幅に開始するため、少なくともその幅を宣言し、そのサイズから柔軟にする必要があります。これは私が推奨するものです：

.tooltip-inner {
    min-width: 100px;
    max-width: 100%; 
}

はmin-width開始サイズを宣言します。他の人が示唆するように、最大​​幅とは対照的に、停止幅を宣言します。あなたの質問によると、最終的な幅を宣言しないでください。そうしないと、ツールチップのコンテンツが最終的にその時点で折り返されます。代わりに、無限幅または柔軟な幅を使用します。max-width: 100%;ツールチップが幅 100 ピクセルで開始されると、コンテンツの量に関係なく、コンテンツに合わせて拡大および調整されます。

ツール チップは、多くのコンテンツを運ぶことを意図したものではありません。画面全体に長い文字列があると、ファンキーに見える可能性があります。そして、レスポンシブ ビュー、特にスマートフォン (幅 320px) に影響を与えることは間違いありません。

これを完璧にするには、次の 2 つのソリューションをお勧めします。

  1. 幅が 320px を超えないように、ツールチップのコンテンツを最小限に抑えます。また、これを行う場合でも、ツールチップを画面の右側に配置し、 を使用すると、ツールチップのコンテンツがスマートフォンに表示されないことを覚えておく必要がありますdata-placement:right(したがって、ブートストラップは最初にそのコンテンツに応答するように設計し、それを許可するようにしました)。包む）
  2. この 1 行のツールチップの概念を使用することに必死になっている場合は、@mediaクエリを使用してツールチップをリセットし、スマートフォンのビューに合わせて 6 つをカバーしてください。このような：

私のデモHEREは、コンテンツのサイズとデバイスの表示サイズにも応じたツールチップの柔軟性と応答性を示しています

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}
于 2016-03-20T12:47:34.027 に答える
24

「重要！」で最大幅を定義します。data-container="body" を使用します

CSSファイル

.tooltip-inner {
    max-width: 500px !important;
}

HTML タグ

<a data-container="body" title="Looooooooooooooooooooooooooooooooooooooong Message" href="#" class="tooltiplink" data-toggle="tooltip" data-placement="bottom" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

JS スクリプト

$('.tooltiplink').tooltip();
于 2014-11-19T10:03:14.710 に答える
23

独自の css を使用してプロパティを上書きする必要があります。そのようです：

div.tooltip-inner {
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    margin-bottom: 6px;
    background-color: #505050;
    font-size: 14px;
}

セレクターは、ツールチップが保持されている div を選択します (ツールチップは JavaScript によって追加され、通常はどのコンテナーにも属しません。

于 2013-03-31T10:14:35.350 に答える
18

幅の問題を解決するには、代わりに次のコードを使用します。

$('input[rel="txtTooltip"]').tooltip({
    container: 'body'
});

例: http://eureka.ykyuen.info/2014/10/08/bootstrap-3-tooltip-width/

于 2015-12-20T20:33:29.003 に答える
10

いくつかの実験の後、これが私にとって最もうまくいきました：

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}
于 2017-04-02T23:13:33.903 に答える
8

bootstrap.css の .tooltip-inner css クラスを編集できます。デフォルトの最大幅は 200px です。最大幅を希望のサイズに変更できます。

于 2013-01-30T04:46:20.383 に答える
6

Bootstrap 4 で、すべてのツールチップの幅を変更したくない場合は、必要なツールチップに特定のテンプレートを使用できます。

<a href="/link" class="btn btn-info"
   data-toggle="tooltip"
   data-placement="bottom"
   data-template="<div class='tooltip' role='tooltip'><div class='arrow'></div><div class='tooltip-inner' style='max-width: 400px;'></div></div>"
   title="This is a long message displayed on 400px width tooltip !"
>
    My button label
</a>
于 2019-10-06T14:44:29.903 に答える
4

以下の投稿を参照してください。cmccullohの答えは私にとってはうまくいきました。 https://stackoverflow.com/posts/31683500/edit

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

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

これにより、ディメンション値などを気にする必要がなくなります。主な問題は、非常に長いテキスト行がある場合、画面から消えてしまうことです ( JSBin の例でわかるように)。

于 2015-11-17T10:37:08.290 に答える
4

クラスをメインのツールチップ div と内側のツールチップに設定します

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}
于 2015-06-19T17:01:47.543 に答える
2

BS3:

.tooltip-inner { width:400px; max-width: 400px; }
于 2014-03-14T16:42:42.220 に答える
1

このコードを試して、

.tooltip-inner {
     max-width:350px !important;
}
于 2016-04-26T05:26:08.927 に答える
-1

ブートストラップ 3.0.3 では、ポップオーバー クラスを変更することで実行できます。

.popover {
    min-width: 200px;
    max-width: 400px;
}
于 2014-02-12T14:46:19.857 に答える