poc(): tether drop

public/app/core/components/popover/popover.ts

@@ -0,0 +1,25 @@
+///<reference path="../../../headers/common.d.ts" />
+
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from '../../core_module';
+import Drop from 'tether-drop';
+
+export function popoverDirective() {
+  return {
+    restrict: 'E',
+    link: function(scope, elem, attrs) {
+      var inputElem = elem.prev();
+      console.log(inputElem);
+      var drop = new Drop({
+        target: inputElem[0],
+        content: 'Welcome to the future!',
+        position: 'right middle',
+        classes: 'drop-theme-arrows-bounce-dark',
+        openOn: 'click'
+      });
+    }
+  };
+}
+
+coreModule.directive('gfPopover', popoverDirective);

public/app/core/core.ts

@@ -24,6 +24,7 @@ import './partials';
 import {grafanaAppDirective} from './components/grafana_app';
 import {sideMenuDirective} from './components/sidemenu/sidemenu';
 import {searchDirective} from './components/search/search';
+import {popoverDirective} from './components/popover/popover';
 import {navbarDirective} from './components/navbar/navbar';
 import {arrayJoin} from './directives/array_join';
 import 'app/core/controllers/all';
@@ -32,4 +33,12 @@ import 'app/core/routes/routes';
 import './filters/filters';
 import coreModule from './core_module';
 
-export {arrayJoin, coreModule, grafanaAppDirective, sideMenuDirective, navbarDirective, searchDirective};
+export {
+  arrayJoin,
+  coreModule,
+  grafanaAppDirective,
+  sideMenuDirective,
+  navbarDirective,
+  searchDirective,
+  popoverDirective
+};

public/app/features/datasources/partials/http_settings.html

@@ -6,6 +6,9 @@
 	<div class="gf-form">
 		<span class="gf-form-label width-7">Url</span>
 		<input class="gf-form-input max-width-21" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
+		<gf-popover style="display: none">
+			Help
+		</gf-popover>
 	</div>
 
 	<div class="gf-form">

public/app/headers/common.d.ts

@@ -39,4 +39,12 @@ declare module 'app/core/store' {
   export default store;
 }
 
+declare module 'tether' {
+  var config: any;
+  export default config;
+}
 
+declare module 'tether-drop' {
+  var config: any;
+  export default config;
+}

public/app/system.conf.js

@@ -3,6 +3,7 @@ System.config({
   baseURL: 'public',
   paths: {
     'tether': 'vendor/npm/tether/dist/js/tether.js',
+    'tether-drop': 'vendor/npm/tether-drop/dist/js/drop.js',
     'moment': 'vendor/moment.js',
     "jquery": "vendor/jquery/dist/jquery.js",
     'lodash-src': 'vendor/lodash.js',

public/sass/_grafana.scss

@@ -64,6 +64,7 @@
 @import "components/footer";
 @import "components/infobox";
 @import "components/shortcuts";
+@import "components/tether_drop";
 @import "components/query_editor";
 
 // PAGES
@@ -76,3 +77,4 @@
 @import "pages/styleguide";
 
 @import "old_responsive";
+

public/sass/components/_popovers.scss

@@ -126,3 +126,181 @@
   }
 
 }
+
+.drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before {
+  box-sizing: border-box; }
+
+.drop-element {
+  position: absolute;
+  display: none; }
+  .drop-element.drop-open {
+    display: block; }
+
+.drop-element.drop-theme-arrows-bounce-dark {
+  max-width: 100%;
+  max-height: 100%; }
+  .drop-element.drop-theme-arrows-bounce-dark .drop-content {
+    border-radius: 5px;
+    position: relative;
+    font-family: inherit;
+    background: #000;
+    color: #fff;
+    padding: 1em;
+    font-size: 1.1em;
+    line-height: 1.5em; }
+    .drop-element.drop-theme-arrows-bounce-dark .drop-content:before {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-width: 12px;
+      border-style: solid; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content {
+    margin-bottom: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content:before {
+      top: 100%;
+      left: 50%;
+      margin-left: -12px;
+      border-top-color: #000; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content {
+    margin-top: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content:before {
+      bottom: 100%;
+      left: 50%;
+      margin-left: -12px;
+      border-bottom-color: #000; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content {
+    margin-right: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content:before {
+      left: 100%;
+      top: 50%;
+      margin-top: -12px;
+      border-left-color: #000; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content {
+    margin-left: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content:before {
+      right: 100%;
+      top: 50%;
+      margin-top: -12px;
+      border-right-color: #000; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
+    margin-top: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before {
+      bottom: 100%;
+      left: 12px;
+      border-bottom-color: #000; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
+    margin-top: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before {
+      bottom: 100%;
+      right: 12px;
+      border-bottom-color: #000; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
+    margin-bottom: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before {
+      top: 100%;
+      left: 12px;
+      border-top-color: #000; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
+    margin-bottom: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before {
+      top: 100%;
+      right: 12px;
+      border-top-color: #000; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
+    margin-right: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before {
+      top: 12px;
+      left: 100%;
+      border-left-color: #000; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
+    margin-left: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before {
+      top: 12px;
+      right: 100%;
+      border-right-color: #000; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
+    margin-right: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before {
+      bottom: 12px;
+      left: 100%;
+      border-left-color: #000; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
+    margin-left: 12px; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before {
+      bottom: 12px;
+      right: 100%;
+      border-right-color: #000; }
+
+.drop-element.drop-theme-arrows-bounce-dark {
+  -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+  -webkit-transition: opacity 100ms;
+          transition: opacity 100ms;
+  opacity: 0; }
+  .drop-element.drop-theme-arrows-bounce-dark .drop-content {
+    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.265, 1.55);
+            transition: transform 0.3s cubic-bezier(0, 0, 0.265, 1.55);
+    -webkit-transform: scale(0) translateZ(0);
+            transform: scale(0) translateZ(0); }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-open {
+    display: none; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-open-transitionend {
+    display: block; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-after-open {
+    -webkit-transition: none;
+            transition: none;
+    opacity: 1; }
+    .drop-element.drop-theme-arrows-bounce-dark.drop-after-open .drop-content {
+      -webkit-transform: scale(1) translateZ(0);
+              transform: scale(1) translateZ(0); }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-center .drop-content {
+    -webkit-transform-origin: 50% calc(100% + 12px);
+        -ms-transform-origin: 50% calc(100% + 12px);
+            transform-origin: 50% calc(100% + 12px); }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-center .drop-content {
+    -webkit-transform-origin: 50% -12px;
+        -ms-transform-origin: 50% -12px;
+            transform-origin: 50% -12px; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-right.drop-element-attached-middle .drop-content {
+    -webkit-transform-origin: calc(100% + 12px) 50%;
+        -ms-transform-origin: calc(100% + 12px) 50%;
+            transform-origin: calc(100% + 12px) 50%; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-left.drop-element-attached-middle .drop-content {
+    -webkit-transform-origin: -12px 50%;
+        -ms-transform-origin: -12px 50%;
+            transform-origin: -12px 50%; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
+    -webkit-transform-origin: 0 -12px;
+        -ms-transform-origin: 0 -12px;
+            transform-origin: 0 -12px; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
+    -webkit-transform-origin: 100% -12px;
+        -ms-transform-origin: 100% -12px;
+            transform-origin: 100% -12px; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
+    -webkit-transform-origin: 0 calc(100% + 12px);
+        -ms-transform-origin: 0 calc(100% + 12px);
+            transform-origin: 0 calc(100% + 12px); }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
+    -webkit-transform-origin: 100% calc(100% + 12px);
+        -ms-transform-origin: 100% calc(100% + 12px);
+            transform-origin: 100% calc(100% + 12px); }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
+    -webkit-transform-origin: calc(100% + 12px) 0;
+        -ms-transform-origin: calc(100% + 12px) 0;
+            transform-origin: calc(100% + 12px) 0; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
+    -webkit-transform-origin: -12px 0;
+        -ms-transform-origin: -12px 0;
+            transform-origin: -12px 0; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
+    -webkit-transform-origin: calc(100% + 12px) 100%;
+        -ms-transform-origin: calc(100% + 12px) 100%;
+            transform-origin: calc(100% + 12px) 100%; }
+  .drop-element.drop-theme-arrows-bounce-dark.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
+    -webkit-transform-origin: -12px 100%;
+        -ms-transform-origin: -12px 100%;
+            transform-origin: -12px 100%; }

public/sass/components/_tether_drop.scss

@@ -0,0 +1,245 @@
+
+@mixin tether($themePrefix: "tether") {
+  .#{ $themePrefix }-element, .#{ $themePrefix }-element * {
+    &, &:after, &:before {
+      box-sizing: border-box;
+    }
+  }
+
+  .#{ $themePrefix }-element {
+    position: absolute;
+    display: none;
+  }
+
+  &.#{ $themePrefix }-open {
+    display: block;
+  }
+}
+
+@mixin tether-theme-arrows($themePrefix: "tether", $themeName: "arrows", $arrowSize: 16px, $arrowPointerEvents: null, $backgroundColor: #fff, $color: inherit, $useDropShadow: false) {
+  .#{ $themePrefix }-element.#{ $themePrefix }-theme-#{ $themeName } {
+    max-width: 100%;
+    max-height: 100%;
+
+    .#{ $themePrefix }-content {
+      border-radius: 5px;
+      position: relative;
+      font-family: inherit;
+      background: $backgroundColor;
+      color: $color;
+      padding: 1em;
+      font-size: 1.1em;
+      line-height: 1.5em;
+
+      @if $useDropShadow {
+        transform: translateZ(0);
+        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .2));
+      }
+
+      &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-width: $arrowSize;
+        border-style: solid;
+        pointer-events: $arrowPointerEvents;
+      }
+    }
+
+    // Centers and middles
+
+    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content {
+      margin-bottom: $arrowSize;
+
+      &:before {
+        top: 100%;
+        left: 50%;
+        margin-left: - $arrowSize;
+        border-top-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-center .#{ $themePrefix }-content {
+      margin-top: $arrowSize;
+
+      &:before {
+        bottom: 100%;
+        left: 50%;
+        margin-left: - $arrowSize;
+        border-bottom-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content {
+      margin-right: $arrowSize;
+
+      &:before {
+        left: 100%;
+        top: 50%;
+        margin-top: - $arrowSize;
+        border-left-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-element-attached-middle .#{ $themePrefix }-content {
+      margin-left: $arrowSize;
+
+      &:before {
+        right: 100%;
+        top: 50%;
+        margin-top: - $arrowSize;
+        border-right-color: $backgroundColor;
+      }
+    }
+
+    // Target middle/center, element corner
+
+    &.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content {
+      left: - $arrowSize * 2;
+    }
+
+    &.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-center .#{ $themePrefix }-content {
+      left: $arrowSize * 2;
+    }
+
+    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
+      margin-top: $arrowSize;
+
+      &:before {
+        bottom: 100%;
+        left: $arrowSize;
+        border-bottom-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
+      margin-top: $arrowSize;
+
+      &:before {
+        bottom: 100%;
+        right: $arrowSize;
+        border-bottom-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
+      margin-bottom: $arrowSize;
+
+      &:before {
+        top: 100%;
+        left: $arrowSize;
+        border-top-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-middle .#{ $themePrefix }-content {
+      margin-bottom: $arrowSize;
+
+      &:before {
+        top: 100%;
+        right: $arrowSize;
+        border-top-color: $backgroundColor;
+      }
+    }
+
+    // Top and bottom corners
+    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content {
+      margin-top: $arrowSize;
+
+      &:before {
+        bottom: 100%;
+        left: $arrowSize;
+        border-bottom-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-bottom .#{ $themePrefix }-content {
+      margin-top: $arrowSize;
+
+      &:before {
+        bottom: 100%;
+        right: $arrowSize;
+        border-bottom-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content {
+      margin-bottom: $arrowSize;
+
+      &:before {
+        top: 100%;
+        left: $arrowSize;
+        border-top-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-top .#{ $themePrefix }-content {
+      margin-bottom: $arrowSize;
+
+      &:before {
+        top: 100%;
+        right: $arrowSize;
+        border-top-color: $backgroundColor;
+      }
+    }
+
+    // Side corners
+    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content {
+      margin-right: $arrowSize;
+
+      &:before {
+        top: $arrowSize;
+        left: 100%;
+        border-left-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-top.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content {
+      margin-left: $arrowSize;
+
+      &:before {
+        top: $arrowSize;
+        right: 100%;
+        border-right-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-right.#{ $themePrefix }-target-attached-left .#{ $themePrefix }-content {
+      margin-right: $arrowSize;
+
+      &:before {
+        bottom: $arrowSize;
+        left: 100%;
+        border-left-color: $backgroundColor;
+      }
+    }
+
+    &.#{ $themePrefix }-element-attached-bottom.#{ $themePrefix }-element-attached-left.#{ $themePrefix }-target-attached-right .#{ $themePrefix }-content {
+      margin-left: $arrowSize;
+
+      &:before {
+        bottom: $arrowSize;
+        right: 100%;
+        border-right-color: $backgroundColor;
+      }
+    }
+  }
+}
+
+$themePrefix: "drop";
+$themeName: "arrows-bounce-dark";
+$arrowSize: 12px;
+$backgroundColor: #000;
+$color: #fff;
+$useDropShadow: false;
+$attachmentOffset: $arrowSize;
+$easing: cubic-bezier(0, 0, 0.265, 1.55);
+
+@include tether($themePrefix: $themePrefix);
+@include tether-theme-arrows($themePrefix: $themePrefix, $themeName: $themeName, $arrowSize: $arrowSize, $backgroundColor: $backgroundColor, $color: $color, $useDropShadow: $useDropShadow);
+
+
+// +drop-animation-scale($themePrefix: $themePrefix, $themeName: $themeName, $attachmentOffset: $attachmentOffset, $easing: $easing)