new table form html, css

resources/assets/js/app.js

@@ -7,6 +7,13 @@
 
 require('./bootstrap');
 
+$(function () {
+    $('[data-toggle="tooltip"]').tooltip({
+      container: 'body'
+    })
+})
+
+
 //
 // window.Vue = require('vue');
 //

resources/assets/sass/_bst-modules.scss

@@ -25,8 +25,8 @@
 @import "~bootstrap/scss/list-group";
 @import "~bootstrap/scss/close";
 @import "~bootstrap/scss/modal";
-//@import "~bootstrap/scss/tooltip";
-//@import "~bootstrap/scss/popover";
+@import "~bootstrap/scss/tooltip";
+@import "~bootstrap/scss/popover";
 //@import "~bootstrap/scss/carousel";
 @import "~bootstrap/scss/utilities";
 //@import "~bootstrap/scss/print";

resources/assets/sass/_variables.scss

@@ -19,3 +19,7 @@ $card-border-radius: 5px;
 $card-inner-border-radius: 2px;
 
 $list-group-hover-bg: rgba($primary, .1);
+
+$tooltip-max-width: 300px;
+$tooltip-bg: darken($primary, 20%);
+$tooltip-arrow-color: $tooltip-bg;

resources/assets/sass/app.scss

@@ -7,6 +7,18 @@
 @import "variables";
 @import "bst-modules";
 
+html {
+	overflow-y: scroll;
+}
+
+.tooltip-inner {
+	text-align: left;
+}
+
+.tooltip-inner {
+	box-shadow: 0 2px 5px rgba(black, .3);
+}
+
 .page-navbar {
 	background: white;
 	border-bottom: 1px solid $primary;