tooltips for function definitions

public/app/plugins/datasource/graphite/add_graphite_func.js

@@ -2,13 +2,15 @@ define([
   'angular',
   'lodash',
   'jquery',
+  'rst2html',
+  'tether-drop',
 ],
-function (angular, _, $) {
+function (angular, _, $, rst2html, Drop) {
   'use strict';
 
   angular
     .module('grafana.directives')
-    .directive('graphiteAddFunc', function($compile) {
+  .directive('graphiteAddFunc', function($compile) {
       var inputTemplate = '<input type="text"'+
                             ' class="gf-form-input"' +
                             ' spellcheck="false" style="display:none"></input>';
@@ -81,6 +83,52 @@ function (angular, _, $) {
 
             $compile(elem.contents())($scope);
           });
+
+          var drops = [];
+
+          $(elem)
+            .on('mouseenter', 'ul.dropdown-menu li', function () {
+              while (drops.length > 0) {
+                drops.pop().remove();
+              }
+
+              var funcDef;
+              try {
+                funcDef = ctrl.datasource.getFuncDef($('a', this).text());
+              } catch (e) {
+                // ignore
+              }
+
+              if (funcDef && funcDef.description) {
+                var shortDesc = funcDef.description;
+                if (shortDesc.length > 500) {
+                  shortDesc = shortDesc.substring(0, 497) + '...';
+                }
+
+                var contentElement = document.createElement('div');
+                contentElement.innerHTML = '<h4>' + funcDef.name + '</h4>' + rst2html(shortDesc);
+
+                var drop = new Drop({
+                  target: this,
+                  content: contentElement,
+                  classes: 'drop-popover',
+                  openOn: 'always',
+                  tetherOptions: {
+                    attachment: 'bottom left',
+                    targetAttachment: 'bottom right',
+                  },
+                });
+
+                drops.push(drop);
+
+                drop.open();
+              }
+            })
+            .on('mouseout', 'ul.dropdown-menu li', function() {
+              while (drops.length > 0) {
+                drops.pop().remove();
+              }
+            });
         }
       };
     });

public/app/plugins/datasource/graphite/func_editor.js

@@ -9,7 +9,7 @@ function (angular, _, $, rst2html) {
 
   angular
     .module('grafana.directives')
-    .directive('graphiteFuncEditor', function($compile, templateSrv) {
+    .directive('graphiteFuncEditor', function($compile, templateSrv, popoverSrv) {
 
       var funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
       var paramTemplate = '<input type="text" style="display:none"' +
@@ -259,8 +259,14 @@ function (angular, _, $, rst2html) {
               }
 
               if ($target.hasClass('fa-question-circle')) {
-                if (func.def.description) {
+                var funcDef = ctrl.datasource.getFuncDef(func.def.name);
-                  alert(rst2html(func.def.description));
+                if (funcDef && funcDef.description) {
+                  popoverSrv.show({
+                    element: e.target,
+                    position: 'bottom left',
+                    template: '<div><h4>' + funcDef.name + '</h4>' + rst2html(funcDef.description) + '</div>',
+                    openOn: 'click',
+                  });
                 } else {
                   window.open(
                     "http://graphite.readthedocs.org/en/latest/functions.html#graphite.render.functions." + func.def.name,'_blank');