finalized tooltip js and css

assets/js/content-interactions.js

@@ -94,6 +94,9 @@ $(".article--content img").on("error", function() {
 });
 
 ////////////////////////// Inject tooltips on load //////////////////////////////
-$('.tooltip').each( function(){
 
-});
+$('.tooltip').each( function(){
+		$toolTipText = $('<div/>').addClass('tooltip-text').text($(this).attr('data-tooltip-text'));
+		$toolTipElement = $('<div/>').addClass('tooltip-container').append($toolTipText);
+		$(this).prepend($toolTipElement);
+	});

assets/styles/layouts/_article.scss

@@ -113,7 +113,6 @@
           "article/tables",
           "article/tags",
           "article/telegraf-plugins",
-          "article/tooltips",
           "article/truncate",
           "article/warn";
 

assets/styles/layouts/article/_tooltips.scss

@@ -1,39 +0,0 @@
-////////////////////////////////// Tool Tips //////////////////////////////////
-
-.tooltip {
-  font-weight: $medium;
-  color: $article-link;
-  position: relative;
-
-  &:before {
-    content: attr(data-tooltip-text);
-    position: absolute;
-    padding: .5rem 1rem;
-    background: $article-bg;
-    border-radius: $radius;
-    box-shadow: 1px 3px 10px $article-shadow;
-    text-align: center;
-    white-space: nowrap;
-    z-index: 100;
-    top: -3rem;
-    left: 50%;
-    margin: 0 0 0 -50%;
-  }
-
-  // &:after {
-  //   content: '';
-  //   top: -1.25rem;
-  //   left: -50%;
-  //   position: absolute;
-  //   z-index: 100;
-  //   width: 0;
-  //   height: 0;
-  //   border-style: solid;
-  //   border-width: 6px 6px 0 6px;
-  //   border-color: red transparent transparent transparent;
-  // }
-}
-
-.tooltip-modal {
-
-}

assets/styles/styles-default.scss

@@ -1,9 +1,10 @@
 // InfluxData Docs Default Theme (Light)
 
 // Import Tools
-@import "tools/icomoon";
+@import "tools/icomoon",
-@import "tools/media-queries.scss";
+        "tools/media-queries.scss",
-@import "tools/mixins.scss";
+        "tools/mixins.scss",
+        "tools/tooltips";
 
 // Import default light theme
 @import "themes/theme-light.scss";

assets/styles/themes/_theme-dark.scss

@@ -172,3 +172,9 @@ $landing-cloud-gradient-left: $m-magenta;
 $landing-cloud-gradient-right: $cp-minsk;
 $landing-sm-gradient-overlay: $b-dodger;
 $landing-artwork-color: $cp-minsk;
+
+// Tooltip colors
+$tooltip-color: $ch-chartreuse;
+$tooltip-color-alt: $ch-canary;
+$tooltip-bg: $g20-white;
+$tooltip-text: $cp-minsk;

assets/styles/themes/_theme-light.scss

@@ -173,3 +173,9 @@ $landing-cloud-gradient-left: $wp-heart !default;
 $landing-cloud-gradient-right: $wp-seance !default;
 $landing-sm-gradient-overlay: $cp-blueviolet !default;
 $landing-artwork-color: rgba($g20-white, .15) !default;
+
+// Tooltip colors
+$tooltip-color: $m-magenta !default;
+$tooltip-color-alt: $wp-trance !default;
+$tooltip-bg: $m-lavander !default;
+$tooltip-text: $g20-white !default;

assets/styles/tools/_tooltips.scss

@@ -0,0 +1,91 @@
+@import "themes/theme-light.scss";
+
+// Font weights
+$medium: 500;
+$bold: 700;
+
+// Border radius
+$radius: 3px;
+
+////////////////////////////////// Tool Tips //////////////////////////////////
+
+.tooltip {
+	position: relative;
+  display: inline;
+	font-weight: $medium;
+	color: $tooltip-color;
+
+  &:hover {
+    .tooltip-container { visibility: visible; }
+    .tooltip-text {
+    	opacity: 1;
+    	transform: translate(-50%,-2.5rem);
+    }
+  }
+
+  .tooltip-container {
+  	position: absolute;
+  	top: 0;
+  	left: 50%;
+  	transform: translateX(-50%);
+  	overflow: visible;
+  	visibility: hidden;
+  }
+
+  .tooltip-text {
+  	font-weight: $medium;
+  	position: absolute;
+  	border-radius: $radius;
+  	padding: .15rem .75rem;
+  	font-size: 0.9rem;
+    line-height: 1.75rem;
+  	left: 50%;
+  	transform: translate(-50%,-1.75rem);
+  	transition: all 0.2s ease;
+  	white-space: nowrap;
+  	opacity: 0;
+  	color: $tooltip-text;
+  	background-color: $tooltip-bg;
+
+    &:after {
+    	content: '';
+    	position: absolute;
+    	left: 50%;
+    	bottom: -14px;
+    	transform: translateX(-50%);
+    	border-top: 8px solid $tooltip-bg;
+    	border-right: 8px solid transparent;
+    	border-bottom: 8px solid transparent;
+    	border-left: 8px solid transparent;
+    }
+  }
+}
+
+th .tooltip {
+	color: $tooltip-color-alt;
+
+  &:hover {
+    .tooltip-container { visibility: visible; }
+    .tooltip-text {
+    	opacity: 1;
+    	transform: translate(-50%,1.75rem);
+    }
+  }
+
+  .tooltip-text {
+  	transform: translate(-50%,1rem);
+
+    &:after {
+    	content: '';
+    	position: absolute;
+      height: 0;
+    	left: 50%;
+    	top: -14px;
+    	transform: translateX(-50%);
+    	border-top: 8px solid transparent;
+    	border-right: 8px solid transparent;
+    	border-bottom: 8px solid $tooltip-bg;
+    	border-left: 8px solid transparent;
+    }
+  }
+}

content/v2.0/reference/key-concepts.md

@@ -133,10 +133,10 @@ This means that queries on tags are faster and that tags are ideal for storing c
 That behavior can hurt query response times - especially on a much larger scale.
 To optimize your queries, it may be beneficial to rearrange your [schema](/influxdb/v0.10/concepts/glossary/#schema) such that the fields (`butterflies` and `honeybees`) become the tags and the tags (`location` and `scientist`) become the fields:
 
-| _time                | _measurement | tag-key | _field | _value |
+| _time                | _measurement | <span class="tooltip" data-tooltip-text="Tag key">scientist</span> | _field | _value |
 |----------------------|--------------|-----------|--------|-------|
-| 2015-08-18T00:00:00Z | <span class="tooltip" data-tooltip-text="Measurement name">census</span> | <span class="tooltip" data-tooltip-text="Tag value">langstroth</span> | <span class="tooltip" data-tooltip-text="Field key">butterflies</span> | <span class="tooltip" data-tooltip-text="Field value">33</span> |
 | 2015-08-18T00:00:00Z | census | mullen   | honeybees   | 23 |
+| <span class="tooltip" data-tooltip-text="Timestamp">2015-08-18T00:00:00Z</span> | <span class="tooltip" data-tooltip-text="Measurement name">census</span> | <span class="tooltip" data-tooltip-text="Tag value">langstroth</span> | <span class="tooltip" data-tooltip-text="Field key">butterflies</span> | <span class="tooltip" data-tooltip-text="Field value">33</span> |
 | 2015-08-18T00:06:00Z | census | anderson | butterflies | 45 |
 | 2015-08-18T00:06:00Z | census | mullen   | honeybees   | 10 |