web-dev-qa-db-ja.com

Twitter Bootstrapのツールチップの幅と高さをどのように変更しますか？

私はTwitter Bootstrapを使ってツールチップを作成しました。

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

ツールチップの幅を変更する方法これはTwitter Bootstrap特有のものなのか、それともツールチップそのものなのか？

twitter-bootstraptooltip
144
onejigtwojig

Bootstrap.cssを上書きするだけです

BS2のデフォルト値はmax-width：200pxです。だからあなたはあなたのニーズに合うものなら何でもそれを増やすことができます。

.tooltip-inner {
    max-width: 350px;
    /* If max-width does not work, try using width instead */
    width: 350px; 
}
195
Valentin Despa

BS3では

.tooltip-inner {
    min-width: 150px; /* the minimum width */
}
32
Shina

あなたはあなた自身の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をセレクタが選択します（tooltipはjavascriptによって追加され、通常はどのコンテナにも属しません）。

22
nglinh

私はこれが非常に古い質問であることを認識しています、しかし私がここに上陸したならば、他の人もそうでしょう。だから私は体重があると考えました。

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

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

min-widthは開始サイズを宣言します。 max-widthとは対照的に、他の人が示唆するように、停止幅を宣言します。あなたの質問によると、あなたは最終的な幅を宣言するべきではありません、さもなければあなたのツールチップコンテンツはその時点で折り返します。代わりに、無限幅または柔軟幅を使用します。 max-width: 100%;は、いったんツールチップが100px幅で開始されると、それに含まれるコンテンツの量にかかわらず、それが拡大してあなたのコンテンツに適応することを保証します。

心に留めておくツールチップは多くの内容を伝えることを意図したものではありません。画面全体に長い文字列があると、ファンキーに見えるかもしれません。そしてそれは間違いなくあなたの敏感な意見、特にスマートフォン（320pxの幅）に影響を与えるでしょう。

私はこれを完璧にするために2つの解決策をお勧めします：

  1. 幅が320ピクセルを超えないように、ツールチップのコンテンツを最小限に抑えます。たとえこれを行ったとしても、あなたがツールチップを画面の右側に配置し、data-placement:rightを付けているかどうかを覚えておく必要があります。ラップします）
  2. この1行のツールチップの概念を使用するのが難しい場合は、@mediaクエリを使用してツールチップをスマートフォンの表示に合わせてリセットして、6つをカバーしてください。このような：

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

@media (max-width: 320px) {
    .tooltip-inner {
         min-width: initial;
         width: 320px;
    }
}
20
LOTUSMS

"important！"で最大幅を定義します。 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();
19
knobli

幅の問題を解決するには、代わりに次のコードを使用してください。

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

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

17
戈晓伟

別の解決策CSSで新しいクラス（例：ツールチップ全体）を作成します。

.tooltip-wide + .tooltip > .tooltip-inner {
     max-width: 100%;
}

幅の広いツールチップが必要な要素にこのクラスを使用します。

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>

ブートストラップツールチップは、ツールチップを含む要素の下にマークアップを生成するので、マークアップが生成された後、HTMLは実際には次のようになります。

<div class="tooltip-wide" data-toggle="tooltip" title="I am a long tooltip">Long tooltip</div>
<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner">I am a long tooltip</div>
</div>

CSSはこれを使用して、隣接する要素（+）に.tooltip-wideにアクセスし、そこからmax-width属性を適用する前に.tooltip-innerに移動します。これは、.tooltip全体のクラスを使用している要素にのみ影響し、他のすべてのツールチップは変更されないままになります。

9
Are

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

7
onejigtwojig

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

.tooltip-inner {
    max-width: 350px; /* set this to your maximum fitting width */
    width: inherit; /* will take up least amount of space */ 
}
6
Xerus

クラスをメインツールチップdivおよび内部ツールチップに設定します。

div.tooltip {
    width: 270px;
}

div.tooltip-inner {
    max-width: 280px;
}
4
Junior

必要に応じてデフォルトのmax-widthを上書きするだけです。

.tooltip-inner {
  max-width: 350px;
}

最大幅が機能しない場合（オプション1）

Max-widthが機能しない場合は、代わりに設定幅を使用できます。これは問題ありませんが、ツールチップはテキストに合わせてサイズ変更されなくなります。気に入らない場合は、オプション2に進んでください。

.tooltip-inner {
  width: 350px;
}

小さいコンテナを正しく処理する（オプション2）

Bootstrapはツールチップをターゲットの兄弟として追加するので、それは含んでいる要素によって制約されます。含んでいる要素があなたのmax-widthより小さければ、max-widthは機能しません。

そのため、max-widthが機能しない場合は、containerを変更するだけです。

<div class="some-small-element">
  <a data-container="body" href="#" title="Your boxed-in tooltip text">
</div>

Pro Tip：コンテナは任意のセレクタにすることができます。これは、いくつかのツールチップでスタイルを上書きするだけの場合に適しています。

4
Anson

下記の記事を参照してください。 cmccullohの答えは私のために働いた。 https://stackoverflow.com/posts/31683500/edit

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

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

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

2
Rajasekar Kalisamy

BS3：

.tooltip-inner { width:400px; max-width: 400px; }
2
Till Hess

私は同じ問題を抱えていましたが、すべての一般的な答え - 私の仕事のために.tooltip-inner{width}を変更することは仕事を正しくすることができませんでした。他の（つまり短い）ツールチップに関しては、固定幅が大きすぎました。私は何千ものツールチップのために別々のhtmlテンプレート/クラスを書くのが面倒だったので、私はちょうど各テキスト行の&nbsp;で単語間のすべてのスペースを置き換えました。

1
Ignas

このコードを試してください、

.tooltip-inner {
     max-width:350px !important;
}
1
Ragas Lamir

すべての可変長と設定された最大幅がうまくいかない鉱山なので、私のcssを100％に設定すると、魅力のように機能します。

.tooltip-inner {
    max-width: 100%;
}
0
shaun

Tooltip-innerクラスのmax-widthを設定しています私にとってはうまくいきませんでした、私はブートストラップ3.2を使っています

いくつかの方法max-widthの設定は、親クラスの幅を設定した場合にのみ有効です（.tooltip）。

しかし、それからすべてのツールチップが指定したサイズになります。だからここに私の解決策です：

親クラスにWidthを追加します。

.tooltip {
  width:400px;
}

次に、max-widthを追加して表示をinline-blockに変更すると、スペース全体が占有されなくなります。

.tooltip-inner {
  max-width: @tooltip-max-width;
  display:inline-block;
}
0
Daniel

いくつかのツールチップの幅を調整する必要がありました。しかし、全体的な設定ではありません。だから私はこれをやった：

CSS

.large-tooltip .tooltip-inner {
    max-width: 300px;
}
@media screen and (max-width: 300px) {
  .large-tooltip .tooltip-inner {
    max-width: 100%;
  }
}

JQuery

$('[data-toggle="tooltip"]')
    .tooltip()
    .on('shown.bs.tooltip', function(e) {
        /**
         * If the item that triggered the event has class 'large-tooltip'
         * then also add it to the currently open tooltip
         */
        if ($(this).hasClass('large-tooltip')) {
            $('body').find('.tooltip[role="tooltip"].show').addClass('large-tooltip');
        }
    });

HTML

<img src="/theimage.jpg" class="large-tooltip" data-toggle="tooltip" data-html="true" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />
0
Julesezaar