web-dev-qa-db-ja.com

Popper.jsのドロップダウン/ツールチップの初期位置が間違っています

トリガーがクリックされた場合に、より多くの投稿カテゴリを表示するためにpopper.jsを使用しています。しかし、クリックした後、初期位置が間違っています（より右）。ポッパーを開いてスクロールすると、ポッパーの位置が更新されます。この状態は初期状態である必要があります。

ポッパーのCSS位置変換が私の使用法に対して間違って計算されていることがわかりました。しかし、スクロールやウィンドウのサイズ変更後に正しい数値に再計算される理由がわかりません。以下のCodepenを確認してください。

私のJS：

$(function () {
 var element = document.getElementById('more-cats');
 var dropdown = document.getElementById('tooltip');

 var catsTooltip = new Popper ( element, dropdown, {
      placement: 'bottom-end'
 });

 $(element).click(function(e) {
      $(dropdown).toggle();
      e.preventDefault();
 });

});

Codepen

何かアイデアがあれば、コードのどの部分を間違えて書いたか、ありがとうございます。

javascripttooltippopper.js
9
freddy87

これは、Popper.jsがその位置を適切に計算できるようにするために、POPper要素をDOMでレンダリングする必要があるためです（別名、ドキュメント内に位置があります）。

要素が非表示のときにPopper.jsを初期化し、その可視性を切り替えて表示しますが、Popper.jsは何かが変更されたことを認識していません。

ページをスクロールするか、サイズを変更すると、Popper.jsはデフォルトでこれらのイベントをリッスンするため、ポッパーの位置を更新します。

catsTooltip.scheduleUpdate()の後に.toggle()を手動で実行して、適切に配置する必要があります。

https://codepen.io/FezVrasta/pen/PJjWWZ

16
Fez Vrasta