ux(): minor work on info popover

public/app/core/components/info_popover.ts

@@ -0,0 +1,60 @@
+///<reference path="../../headers/common.d.ts" />
+
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from 'app/core/core_module';
+import Drop from 'tether-drop';
+
+export function infoPopover() {
+  return {
+    restrict: 'E',
+    transclude: true,
+    link: function(scope, elem, attrs, ctrl, transclude) {
+      var inputElem = elem.prev();
+      if (inputElem.length === 0) {
+        console.log('Failed to find input element for popover');
+        return;
+      }
+
+      var offset = attrs.offset || '0 -10px';
+      var position = attrs.position || 'right middle';
+      var classes = 'drop-help';
+      if (attrs.wide) {
+        classes += ' drop-wide';
+      }
+
+      transclude(function(clone, newScope) {
+        var content = document.createElement("div");
+        _.each(clone, (node) => {
+          content.appendChild(node);
+        });
+
+        var drop = new Drop({
+          target: inputElem[0],
+          content: content,
+          position: position,
+          classes: classes,
+          openOn: 'click',
+          tetherOptions: {
+            offset: offset
+          }
+        });
+
+      // inputElem.on('focus.popover', function() {
+      //   drop.open();
+      // });
+      //
+      // inputElem.on('blur.popover', function() {
+      //   close();
+      // });
+
+        scope.$on('$destroy', function() {
+          drop.destroy();
+        });
+
+      });
+    }
+  };
+}
+
+coreModule.directive('infoPopover', infoPopover);