Rewrite tooltips code without jQuery

1 files changed, 16 insertions, 42 deletions

diff --git a/assets/sass/_tooltip.sass b/assets/sass/_tooltip.sass
index 14b91d51..95ea1032 100644
--- a/assets/sass/_tooltip.sass
+++ b/assets/sass/_tooltip.sass
@@ -1,49 +1,23 @@
 @import variables
 
-.tooltip-arrow:after
-  background: #fff
-  border: 1px solid #aaaaaa
-  box-shadow: 0 0 5px #aaa
+.tooltip
+  i.fa
+    cursor: pointer
 
-div.ui-tooltip
-  min-width: 200px
-  max-width: 600px
+  .fa-info-circle
+    color: color('light')
 
-.tooltip-arrow
-  width: 20px
-  height: 10px
-  overflow: hidden
+#tooltip-container
+  padding: 5px
+  background: #fff
+  border: 1px solid #ddd
+  border-radius: 4px
+  box-shadow: 0 6px 12px #aaa
   position: absolute
-  &.top
-    top: -10px
-  &.bottom
-    bottom: -10px
-  &.align-left
-    left: 10px
-  &.align-right
-    right: 10px
-  &:after
-    content: ""
-    position: absolute
-    width: 14px
-    height: 14px
-    -webkit-transform: rotate(45deg)
-    -ms-transform: rotate(45deg)
-    transform: rotate(45deg)
-  &.bottom:after
-    top: -10px
-  &.top:after
-    bottom: -10px
-  &.align-left:after
-    left: 0
-  &.align-right:after
-    right: 0
-
-.tooltip-large
-  width: 600px
+  min-width: 350px
 
-.ui-tooltip-content .markdown p
-  margin-bottom: 0
+  .markdown p
+    margin-bottom: 0
 
-.tooltip .fa-info-circle
-  color: color('light')
+  .tooltip-large
+    width: 600px