Begin to add arrow to Popover and Tooltip

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>'
   })

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()
         }

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>