From: Johann-S <johann.servoire@gmail.com>
Date: Wed, 19 Apr 2017 08:20:50 +0000 (+0200)
Subject: Better placement for Dropdown + Handle flip of Tooltip/Popover
X-Git-Tag: v4.0.0-beta~166^2~49
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=18e4e851e2829aedc6d1ff2b703ba5cae2c0a288;p=thirdparty%2Fbootstrap.git

Better placement for Dropdown + Handle flip of Tooltip/Popover
---

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index d678a3a028..613a238128 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -65,8 +65,8 @@ const Dropdown = (($) => {
   }
 
   const AttachmentMap = {
-    TOP    : 'top',
-    BOTTOM : 'bottom'
+    TOP    : 'top-start',
+    BOTTOM : 'bottom-start'
   }
 
   const Default = {
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 2c34ac5d7c..b446d9bcc6 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -287,6 +287,12 @@ const Tooltip = (($) => {
             offset : {
               offset : this.config.offset
             }
+          },
+          onCreate : (data) => {
+            this._handlePopperPlacementChange(data)
+          },
+          onUpdate : (data) => {
+            this._handlePopperPlacementChange(data)
           }
         })
 
@@ -637,6 +643,12 @@ const Tooltip = (($) => {
       }
     }
 
+    _handlePopperPlacementChange(data) {
+      if (data.originalPlacement !== data.placement) {
+        this._cleanTipClass()
+        this.addAttachmentClass(this._getAttachment(data.placement))
+      }
+    }
 
     // static
 
diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
index 4fd813c060..93fa01f9da 100644
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
@@ -10,7 +10,7 @@
     <div class="container">
       <h1>Popover <small>Bootstrap Visual Test</small></h1>
 
-      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+      <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Default placement was on top but not enough place">
         Popover on top
       </button>