Add help-box and improve popover component

index.html

@@ -2660,6 +2660,10 @@ <h2>Popovers @TODO</h2>
             <button type="button" class="btn btn-outline-primary" data-container="body" data-toggle="popover" data-placement="right" title="Dismissible popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                 Popover on right  (with title)
             </button>
+
+            <span class="help-box" data-container="body" data-toggle="popover" data-placement="right" title="Dismissible popover" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+                <i class="material-icons">info</i>
+            </span>
         </article>
 
         <article id="progress">

scss/_help-box.scss

@@ -0,0 +1,11 @@
+$component-name: help-box;
+
+.#{$component-name} {
+    margin: 0 10px;
+    cursor: pointer;
+
+    i {
+        font-size: 14px;
+        color: $primary;
+    }
+}

scss/_popover.scss

@@ -0,0 +1,51 @@
+$component-name: popover;
+
+.#{$component-name} {
+    padding: 5px;
+    background: $gray-700;
+    border: none;
+
+    & &-header,
+    & &-body {
+        color: #ffffff;
+        background: none;
+        border: none;
+        padding: 0;
+    }
+
+    &.bs-popover-right .arrow {
+        left: calc((0.5rem) * -1);
+
+        &::before,
+        &::after {
+            border-right-color: $gray-700;
+        }
+    }
+
+    &.bs-popover-left .arrow {
+        right: calc((0.5rem) * -1);
+
+        &::before,
+        &::after {
+            border-left-color: $gray-700;
+        }
+    }
+
+    &.bs-popover-bottom .arrow {
+        top: calc((0.5rem) * -1);
+
+        &::before,
+        &::after {
+            border-bottom-color: $gray-700;
+        }
+    }
+
+    &.bs-popover-top .arrow {
+        bottom: calc((0.5rem) * -1);
+
+        &::before,
+        &::after {
+            border-top-color: $gray-700;
+        }
+    }
+}

scss/application.scss

@@ -21,6 +21,8 @@
 // Components
 @import "type";
 @import "alerts";
+@import "help-box";
+@import "popover";
 @import "badges";
 @import "buttons";
 @import "button-group";