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

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

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

ツールチップの幅を変更するにはどうすればよいですか？これはTwitterブートストラップまたはツールチップ自体に固有のものですか？

bootstrap.cssをオーバーライドするだけ

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

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

BS3で

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

これは非常に古い質問だと思いますが、ここに着陸した場合、他の人もそうです。それで私は体重を測っていました。

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

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

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

KEEP IN MIND ツールチップは、多くのコンテンツを運ぶことを目的としていません。画面全体に長い文字列がある場合は、ファンキーに見えます。そしてそれは間違いなくあなたのレスポンシブなビュー、特にスマートフォン（幅320px）に影響を与えます。

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

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

私のデモHEREは、同様、コンテンツサイズとデバイスのディスプレイサイズに応じたツールチップ上の柔軟性と応答性を実証します

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

独自の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によって追加され、通常、どのコンテナーにも属しません。

「重要！」で最大幅を定義します 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();

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

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

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

別の解決策; 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に隣接する要素（+）にアクセスし、そこから.tooltip-innerに移動してから、max-width属性を適用します。これは.tooltip-wideクラスを使用する要素にのみ影響し、他のすべてのツールチップは変更されません。

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

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

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

デフォルトmax-widthを、ニーズに合ったものにオーバーライドするだけです。

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

max-widthが機能しない場合（オプション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>

プロのヒント：コンテナーは任意のセレクターにすることができます。これは、いくつかのツールチップのスタイルのみをオーバーライドする場合に便利です。

クラスをメインツールチップdivに設定し、内部ツールチップに

div.tooltip {
    width: 270px;
}

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

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

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

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

これにより、寸法値などを気にする必要がなくなります。主な問題は、非常に長いテキスト行がある場合、画面からはみ出してしまうことです（JSBinの例で確認できます）。

BS3：

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

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

<a href="https://stackoverflow.com/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>

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

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

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

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

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." />

クラスtooltip-inner の最大幅を設定してもうまくいきませんでした。ブートストラップ3.2を使用。

親クラスの幅を設定した場合にのみ最大幅の設定が機能する方法（.tooltip）の。

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

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

.tooltip {
  width:400px;
}

次に、最大幅を追加し、表示をインラインブロックに変更して、スペース全体を占有しないようにします

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

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

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

Bootstrap 4を使用して

.tooltip-inner {
    margin-left: 50%;
    max-width: 50%;
    width: 50%;
    min-width: 300px;
}

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

.popover {
    min-width: 200px;
    max-width: 400px;
}