Influxdata
/
docs-v2
mirror of https://github.com/influxdata/docs-v2.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

finalized tooltip js and css

pull/505/head
Scott Anderson 2019-10-08 15:36:30 -06:00
parent 643ea8d0a5
commit abc335731f
8 changed files with 114 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/js/content-interactions.js
View File

@ -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);
});

1
assets/styles/layouts/_article.scss
View File

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

39
assets/styles/layouts/article/_tooltips.scss
View File

@ -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 {
}

7
assets/styles/styles-default.scss
View File

@ -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";

6
assets/styles/themes/_theme-dark.scss
View File

@ -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;

6
assets/styles/themes/_theme-light.scss
View File

@ -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;

91
assets/styles/tools/_tooltips.scss Normal file
View File

@ -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;
}
}
}

4
content/v2.0/reference/key-concepts.md
View File

@ -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 |