diff --git a/public/app/core/components/info_popover.ts b/public/app/core/components/info_popover.ts
index 98bbde1e683..cc49ecbc4ab 100644
--- a/public/app/core/components/info_popover.ts
+++ b/public/app/core/components/info_popover.ts
@@ -18,7 +18,7 @@ export function infoPopover() {
var offset = attrs.offset || '0 -10px';
var position = attrs.position || 'right middle';
- var classes = 'drop-help';
+ var classes = 'drop-help drop-hide-out-of-bounds';
if (attrs.wide) {
classes += ' drop-wide';
}
diff --git a/public/app/core/components/switch.ts b/public/app/core/components/switch.ts
index c2ac6ca1497..e0971c02f9b 100644
--- a/public/app/core/components/switch.ts
+++ b/public/app/core/components/switch.ts
@@ -4,6 +4,7 @@ import config from 'app/core/config';
import _ from 'lodash';
import $ from 'jquery';
import coreModule from 'app/core/core_module';
+import Drop from 'tether-drop';
var template = `
@@ -44,10 +45,27 @@ export function switchDirective() {
checked: "=",
label: "@",
labelClass: "@",
+ tooltip: "@",
switchClass: "@",
onChange: "&",
},
template: template,
+ link: (scope, elem) => {
+ if (scope.ctrl.tooltip) {
+ var drop = new Drop({
+ target: elem[0],
+ content: scope.ctrl.tooltip,
+ position: "right middle",
+ classes: 'drop-help',
+ openOn: 'hover',
+ hoverOpenDelay: 400,
+ });
+
+ scope.$on('$destroy', function() {
+ drop.destroy();
+ });
+ }
+ }
};
}
diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html
index 3ab3a582e49..33b1a247235 100644
--- a/public/app/features/dashboard/partials/settings.html
+++ b/public/app/features/dashboard/partials/settings.html
@@ -19,10 +19,11 @@
-
+
+
Toggles
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
-
-
-
+
+
+
-
+
diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html
index 6b8ae631a00..9ff82027abf 100644
--- a/public/app/features/plugins/partials/ds_edit.html
+++ b/public/app/features/plugins/partials/ds_edit.html
@@ -31,26 +31,26 @@
Name
-
- The name is used when you select the data source in panels.
- The Default data source is preselected in new
- panels.
-
+
+ The name is used when you select the data source in panels.
+ The Default data source is preselected in new
+ panels.
+
-
-
+
+
diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss
index 34c53557d45..0af497f46f2 100644
--- a/public/sass/components/_drop.scss
+++ b/public/sass/components/_drop.scss
@@ -15,11 +15,7 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
display: block;
}
- &.drop-open.drop-help.drop-out-of-bounds,
- &.drop-open-transitionend.drop-help.drop-out-of-bounds {
- display: none;
- }
-}
+ }
.drop-element, .drop-element * {
box-sizing: border-box;
@@ -38,6 +34,12 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00);
}
}
+.drop-hide-out-of-bounds {
+ &.drop-open.drop-help.drop-out-of-bounds,
+ &.drop-open-transitionend.drop-help.drop-out-of-bounds {
+ display: none;
+ }
+}
@include drop-theme("help", $popover-help-bg, $popover-help-color);
@include drop-theme("popover", $popover-bg, $popover-color);
diff --git a/public/sass/components/_old_stuff.scss b/public/sass/components/_old_stuff.scss
index eae5eb558ce..bb53b657862 100644
--- a/public/sass/components/_old_stuff.scss
+++ b/public/sass/components/_old_stuff.scss
@@ -1,9 +1,9 @@
-div.editor-row {
+.editor-row {
vertical-align: top;
}
-div.editor-row div.section {
+.section {
margin-right: 20px;
vertical-align: top;
display: inline-block;