Merge pull request #278 from ashmaroli/tooltip

add a tooltip to 'New metadata field' link

Author: mertkahyaoglu

src/containers/MetaFields.js

@@ -52,7 +52,12 @@ export class MetaFields extends Component {
       <div className="metafields">
         {metafields}
         <div className="meta-new">
-          <a onClick={() => addField('metadata')}><i className="fa fa-plus-circle"></i>New metadata field</a>
+          <a onClick={() => addField('metadata')} className="tooltip">
+            <i className="fa fa-plus-circle"></i> New metadata field
+            <span className="tooltip-text">
+              Metadata will be stored as the YAML Front Matter within the document.
+            </span>
+          </a>
         </div>
       </div>
     );

src/styles/content.scss

@@ -186,4 +186,36 @@
     background: #cfcfcf;
     border: 0;
   }
+
+  .tooltip {
+    position: relative; 
+    
+    .tooltip-text {
+      display: none;
+      position: absolute;
+      top: 36px;
+      right: -250px;
+      width: 300px;
+      padding: 10px;
+      font-size: 1rem;
+      color: $white;
+      text-align: center;
+      background: $dark-gray;
+      @include border-radius($border-radius);
+
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: 100%;
+        left: 5%;
+        border: 9px solid;
+        border-color: transparent transparent $dark-gray transparent;
+      }
+    }
+
+    &:hover .tooltip-text {
+      display: block;
+    }
+  }
 }
+

src/styles/variables.scss

@@ -7,6 +7,7 @@ $dark-red: #f44336;
 $green: #8bc34a;
 $off-white: #fafafa;
 $white: #fcfcfc;
+$dark-gray: #727272;
 $inactive-gray: #9ea1a3;
 $new: #68BD6A;
 $new-hover: #80ce81;