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

Regression of #32692

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

1 files changed, 10 insertions, 1 deletions

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 94c3935bd9..aa54371e7e 100644
--- 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)