[skip ci] use popover css but not js

1 files changed, 57 insertions, 40 deletions

diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
index 4978dce26d2..3ff30461491 100644
--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -1,6 +1,6 @@
-.feature-highlight-container {
-  position: relative;
-}
+// .feature-highlight-container {
+//   position: relative;
+// }
 
 .feature-highlight {
   margin-left: 16px;
@@ -17,51 +17,68 @@
   }
 }
 
-.rich-tooltip-container {
+.popover-container {
   display: none;
-  position: absolute;
-  top: -50px;
-  left: 0;
-  padding-left: 50px;
-  background-color: rgba(0,0,0, 0.1);
+  // background-color: rgba(0, 0, 0, 0.1);
+  width: 200px;
+  height: 30px;
+  margin-top: -13px;
+  cursor: default;
 }
 
-.rich-tooltip.right-tooltip:before {
-  content: '';
-  position: absolute;
-  left: 41px;
-  top: 50px;
-  width: 10px;
-  height: 10px;
-  background-color: white;
+.feature-highlight .popover {
+  display: block;
 }
 
-.rich-tooltip {
-  cursor: default;
-  background-color: $white-light;
-  box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px;
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
-  max-width: 276px;
+.feature-highlight:hover .popover-container {
+  display: block;
+}
 
-  header {
-    padding: 8px 14px;
-    margin: 0;
-    border-bottom: 1px solid rgb(235, 235, 235);
-    border-radius: 5px 5px 0 0;
-  }
+// .rich-tooltip-container {
+//   display: none;
+//   position: absolute;
+//   top: -50px;
+//   left: 0;
+//   padding-left: 50px;
+//   background-color: rgba(0,0,0, 0.1);
+// }
 
-  section {
-    padding: 9px 14px;
-  }
-}
+// .rich-tooltip.right-tooltip:before {
+//   content: '';
+//   position: absolute;
+//   left: 41px;
+//   top: 50px;
+//   width: 10px;
+//   height: 10px;
+//   background-color: white;
+// }
 
-// .feature-highlight-container:hover .rich-tooltip,
-.feature-highlight-container:hover > .rich-tooltip-container {
-  display: block;
-}
+// .rich-tooltip {
+//   cursor: default;
+//   background-color: $white-light;
+//   box-shadow: rgba(0, 0, 0, 0.2) 0 5px 10px;
+//   border-width: 1px;
+//   border-style: solid;
+//   border-color: rgba(0, 0, 0, 0.2);
+//   border-radius: 6px;
+//   max-width: 276px;
+
+//   header {
+//     padding: 8px 14px;
+//     margin: 0;
+//     border-bottom: 1px solid rgb(235, 235, 235);
+//     border-radius: 5px 5px 0 0;
+//   }
+
+//   section {
+//     padding: 9px 14px;
+//   }
+// }
+
+// // .feature-highlight-container:hover .rich-tooltip,
+// .feature-highlight-container:hover > .rich-tooltip-container {
+//   display: block;
+// }
 
 @include keyframes(pulse-highlight) {
   0% {