diff --git a/assets/js/content-interactions.js b/assets/js/content-interactions.js
index acf4f96c2..2c403868d 100644
--- a/assets/js/content-interactions.js
+++ b/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 = $('').addClass('tooltip-text').text($(this).attr('data-tooltip-text'));
+ $toolTipElement = $('').addClass('tooltip-container').append($toolTipText);
+ $(this).prepend($toolTipElement);
+ });
diff --git a/assets/styles/layouts/_article.scss b/assets/styles/layouts/_article.scss
index 522105c82..1c8ef4a49 100644
--- a/assets/styles/layouts/_article.scss
+++ b/assets/styles/layouts/_article.scss
@@ -113,7 +113,6 @@
"article/tables",
"article/tags",
"article/telegraf-plugins",
- "article/tooltips",
"article/truncate",
"article/warn";
diff --git a/assets/styles/layouts/article/_tooltips.scss b/assets/styles/layouts/article/_tooltips.scss
deleted file mode 100644
index 48b6c3772..000000000
--- a/assets/styles/layouts/article/_tooltips.scss
+++ /dev/null
@@ -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 {
-
-}
diff --git a/assets/styles/styles-default.scss b/assets/styles/styles-default.scss
index d22c47221..ac37b1ae0 100644
--- a/assets/styles/styles-default.scss
+++ b/assets/styles/styles-default.scss
@@ -1,9 +1,10 @@
// InfluxData Docs Default Theme (Light)
// Import Tools
-@import "tools/icomoon";
-@import "tools/media-queries.scss";
-@import "tools/mixins.scss";
+@import "tools/icomoon",
+ "tools/media-queries.scss",
+ "tools/mixins.scss",
+ "tools/tooltips";
// Import default light theme
@import "themes/theme-light.scss";
diff --git a/assets/styles/themes/_theme-dark.scss b/assets/styles/themes/_theme-dark.scss
index 4ca1c16ad..ca028db79 100644
--- a/assets/styles/themes/_theme-dark.scss
+++ b/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;
diff --git a/assets/styles/themes/_theme-light.scss b/assets/styles/themes/_theme-light.scss
index acecc24ef..25610b1c3 100644
--- a/assets/styles/themes/_theme-light.scss
+++ b/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;
diff --git a/assets/styles/tools/_tooltips.scss b/assets/styles/tools/_tooltips.scss
new file mode 100644
index 000000000..72673ff6a
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/content/v2.0/reference/key-concepts.md b/content/v2.0/reference/key-concepts.md
index 88e946271..aa71f6d79 100644
--- a/content/v2.0/reference/key-concepts.md
+++ b/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 | scientist | _field | _value |
|----------------------|--------------|-----------|--------|-------|
-| 2015-08-18T00:00:00Z | census | langstroth | butterflies | 33 |
| 2015-08-18T00:00:00Z | census | mullen | honeybees | 23 |
+| 2015-08-18T00:00:00Z | census | langstroth | butterflies | 33 |
| 2015-08-18T00:06:00Z | census | anderson | butterflies | 45 |
| 2015-08-18T00:06:00Z | census | mullen | honeybees | 10 |