Begin to add arrow to Popover and Tooltip

diff --git a/js/src/popover.js b/js/src/popover.js
index e20b50f976cc696f2aa229e9d1d062e353cb6d52..02efe2b2edeaf145cdb2481584c38e4f11d101e5 100644 (file)
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -28,6 +28,7 @@ const Popover = (($) => {
     trigger   : 'click',
     content   : '',
     template  : '<div class="popover" role="tooltip">'
+              + '<div class="arrow"></div>'
               + '<h3 class="popover-title"></h3>'
               + '<div class="popover-content"></div></div>'
   })

diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index c4c4ee2f648cf08e94224e3cca578819fe4a6127..505a8d492abe9589fee86e59f52fcdb67c195c4f 100644 (file)
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -37,6 +37,7 @@ const Tooltip = (($) => {
   const Default = {
     animation   : true,
     template    : '<div class="tooltip" role="tooltip">'
+                + '<div class="arrow"></div>'
                 + '<div class="tooltip-inner"></div></div>',
     trigger     : 'hover focus',
     title       : '',
@@ -281,10 +282,8 @@ const Tooltip = (($) => {
 
         this._popper = new Popper(this.element, tip, {
           placement : attachment,
+          arrowElement : '.arrow',
           modifiers : {
-            arrow : {
-              element : Selector.TOOLTIP
-            },
             offset : {
               offset : this.config.offset
             }
@@ -335,7 +334,10 @@ const Tooltip = (($) => {
 
         this.element.removeAttribute('aria-describedby')
         $(this.element).trigger(this.constructor.Event.HIDDEN)
-        this._popper.destroy()
+        if (this._popper !== null) {
+          this._popper.destroy()
+        }
+
         if (callback) {
           callback()
         }

diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index e999514f7b9604338d409fd9101d7dd16d473b00..90b814e674349b091706ec063e6b71102919d689 100644 (file)
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -170,7 +170,7 @@
     </div>
 
     <script src="../../../docs/assets/js/vendor/jquery-slim.min.js"></script>
-    <script src="../../../docs/assets/js/vendor/tether.min.js"></script>
+    <script src="../../../docs/assets/js/vendor/popper.min.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/modal.js"></script>
     <script src="../../dist/collapse.js"></script>