Popover/Tooltip: Fix vertical alignment on arrow of tip elements (#35527)

Regression of #32692

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 94c3935bd953fa5646ac7eb26cf2878ad572b342..aa54371e7e4a5aad48bef7aec10973aece756c09 100644 (file)
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -449,6 +449,16 @@ class Tooltip extends BaseComponent {
           options: {
             element: `.${this.constructor.NAME}-arrow`
           }
+        },
+        {
+          name: 'preSetPlacement',
+          enabled: true,
+          phase: 'beforeMain',
+          fn: data => {
+            // Pre-set Popper's placement attribute in order to read the arrow sizes properly.
+            // Otherwise, Popper mixes up the width and height dimensions since the initial arrow style is for top placement
+            this._getTipElement().setAttribute('data-popper-placement', data.state.placement)
+          }
         }
       ]
     }
@@ -624,7 +634,6 @@ class Tooltip extends BaseComponent {
   }
 
   // Static
-
   static jQueryInterface(config) {
     return this.each(function () {
       const data = Tooltip.getOrCreateInstance(this, config)