From 4c3b6c5ceb8eda2f0c3f23317d5862248c6d6f9b Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Wed, 24 May 2017 14:09:36 +0200
Subject: [PATCH] Placement auto for popovers

---
 js/src/popover.js            |  2 +-
 js/tests/visual/popover.html |  4 ++++
 scss/_popover.scss           | 14 ++++++++++++++
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/js/src/popover.js b/js/src/popover.js
index 6c9d786647..a068420d63 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -23,7 +23,7 @@ const Popover = (($) => {
   const EVENT_KEY           = `.${DATA_KEY}`
   const JQUERY_NO_CONFLICT  = $.fn[NAME]
   const CLASS_PREFIX        = 'bs-popover'
-  const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
+  const BSCLS_PREFIX_REGEX  = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
 
   const Default = $.extend({}, Tooltip.Default, {
     placement : 'right',
diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
index 93fa01f9da..2354abf425 100644
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
@@ -10,6 +10,10 @@
     <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="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+        Popover on auto
+      </button>
+
       <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>
diff --git a/scss/_popover.scss b/scss/_popover.scss
index 53b5593332..e3a0d9d6d5 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -156,6 +156,20 @@
       border-left-color: $popover-arrow-color;
     }
   }
+  &.bs-popover-auto {
+    &[x-placement^="top"] {
+      @extend .bs-popover-top;
+    }
+    &[x-placement^="right"] {
+      @extend .bs-popover-right;
+    }
+    &[x-placement^="bottom"] {
+      @extend .bs-popover-bottom;
+    }
+    &[x-placement^="left"] {
+      @extend .bs-popover-left;
+    }
+  }
 }