web-dev-qa-db-ja.com

Bootstrapツールチップが最初のホバーで間違った位置にあり、次に正しい位置にある

Twitterのツールチップを使用していますbootstrap Webページのdivでツールチップは初期化されていますが、最初のホバーでは間違った位置にありますが、その後のホバーではツールチップが正しい位置にあります。

ツールチップが取り付けられているdivが絶対に配置されているため、問題が発生していると思います。

これが私のhtmlのdivタグです：

<div class="btn-group" id="sample-menu" data-toggle="tooltip" data-placement="left" title="Tooltip on left">

これは、最初のホバーでツールチップが表示される方法です： This is how the tooltip is displayed on the first hover

そして、その後のすべてのホバーでどのように表示されるかを次に示します。 And here is how it is displayed on every hover after that

（サイズはスクリーンショットのトリミングサイズだけを変更していません）

Divに適用されるスタイルは次のとおりです。

#sample-menu {
  position: absolute;
  top: 95px;
  right: 608px;
}

これを機能させるために、divの位置を変えることもできます。ツールチップが、絶対に配置されたdivで完全に機能するように見えるのはなぜかと思いますが、最初のホバーの後でのみです。

**絶対に配置されていないdivにツールチップをいくつか追加しましたが、同じ問題が発生します（ツールチップの最初の外観が要素から削除され、最初の外観の後で正しい）。 javascript（d3）で追加およびサイズ変更されている要素を含むページにsvgがあります。すべてのページ要素が追加/サイズ変更された後、ツールチップを再配置するために何かを呼び出す必要があるようですが、Bootstrap TooltipまたはTetherの再配置ソリューションはどれも機能しませんでした。

htmlcsstwitter-bootstraptooltip
5
haydenwagner

これが 元の問題のコーデックス

子要素を希望どおりに完全に配置できるように、ボディの位置を「相対」にしました。また、コンテンツを中央に配置するために、ボディのマージンを「0自動」に設定しました。これらのスタイルは、Ericが回答で述べたツールチップコンテナオプションソリューションに干渉しました。

/*original css*/
body {
  position: relative;
  width: 980px;

  /*set as important to work in codepen example*/
  margin:0 auto !important;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js that didn't solve tooptip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
    container: 'body'
  });
});

そもそもそのスタイリングを体に適用するのは悪い習慣でした。これが この問題を解決するcodepen であり、ツールチップの問題がなくても、必要な外観と動作が得られます。コンテンツの周りにコンテナを追加してスタイルを適用すると、Eric Gが提案したツールチップ「container： 'body'」ソリューションが機能しました。

/*new css with styling on a container div instead of the body*/
.container {
  position: relative;
  width: 980px;
  margin:0 auto;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js now fixes the tooltip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
   container: 'body'
  });
});
2
haydenwagner

以下は、過去に絶対位置決めを含むツールチップについて私のために働いてきました：

$('[data-toggle="tooltip"]').tooltip({
   container: 'body'
});

ページ上ですべてのレンダリングが完了し、すべてが正常に設定された後で、このスクリプトをトリガーするだけです。また、ツールチップが更新されている領域では、これを再度実行する必要があります。

13
Eric G

ツールチップ設定で他のコンテナ（'body'だけでなく）を指定することもできます。

私はこのようなHTMLを使ったプロジェクトを持っていました：

<body>
    <div class='wrapper'>
    ...
        <div>
            <p>Test message with tooltip <span class="tooltip-icon" 
                     data-toggle="tooltip" 
                     data-placement="right"
                     title="Tooltip test">?</span></p>
        </div>
    ...
    </div>
</body>

このJSを使用した場合、ツールチップの位置決め計算に問題があります。

$('[data-toggle="tooltip"]').tooltip({
   container: 'body'
});

私が理解したように、問題はbody要素のmargin: 0スタイルが原因で発生しました。

body要素のスタイルとデフォルトのマークアップを変更せずにこの問題を修正しようとして、次のような他のコンテナーを使用しました。

$('[data-toggle="tooltip"]').tooltip({
   container: '.wrapper'
});

そして、すべてが変更なしで完全に機能しました。

bootstrapドキュメントから：

https://getbootstrap.com/docs/4.3/components/tooltips/#options

name:    container 
values:  string | element | false
default: false  
descr.:  Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.

Bootstrapのtooltip.jsを確認すると、container値を文字列として設定すると、DOMで指定されたセレクターを持つ要素を検索しようとすることがわかります（_proto._getContainer() methodを参照）。 ）

4
Andrew Evt

これがクールな修正です：デフォルトのBootstrapのツールチップを使用する代わりに、カスタムのみを割り当てますdata-hint：

<button type="button" class="btn" data-hint="Add new column">

dOMを変更するたびに、次の関数を実行します。

function _createTooltips(block) {
    block.find('[data-hint]:visible').each(function(index) {
        h = $(this).data('hint')
        $(this).data('toggle'   , 'tooltip')
        $(this).data('placement', 'bottom')
        $(this).data('title', h) 
        $(this).tooltip()
    });
}

ここで、blockは、ヒントを含む新しく追加された要素を含む親です。簡単で効率的。また、HTMLを短くします:-)

1
rafal chlopek

Bootstrap 4で同じ問題が発生しましたが、ここでの他の回答が機能しなかったため（コンテナー： 'body'の場合）、初期化して今のところ修正しました最初のマウスエンターのみ。（その後、属性「data-original-title」が存在します）

このコードのさらに良い点は、まだDOMの一部ではないページ上のすべての新しいアイテムに対してツールチップが機能することです。これは、$（document）.on（ 'mouseenter'、...）から開始するためです。

/**
 * This code will execute only once when hovering the first time (mouseenter). 
 * Then we close it and open it again for fixing wrong placement.
 * (It happens without noticing it)
 */
$(document).on('mouseenter', '[data-toggle="tooltip"]:not([data-original-title])', function() {
    $(this)
        .tooltip()
        .tooltip('show')

        /**
         * Fix for wrong placement when Bootstrap's tooltip open the first time
         */
        .tooltip('hide')
        .tooltip('show')
    ;
});
0
Julesezaar