fix info popover, #10302 (#10377)

public/app/core/components/info_popover.ts

@@ -10,10 +10,10 @@ export function infoPopover() {
     template: '<i class="fa fa-info-circle"></i>',
     transclude: true,
     link: function(scope, elem, attrs, ctrl, transclude) {
-      var offset = attrs.offset || '0 -10px';
-      var position = attrs.position || 'right middle';
-      var classes = 'drop-help drop-hide-out-of-bounds';
-      var openOn = 'hover';
+      let offset = attrs.offset || '0 -10px';
+      let position = attrs.position || 'right middle';
+      let classes = 'drop-help drop-hide-out-of-bounds';
+      let openOn = 'hover';
 
       elem.addClass('gf-form-help-icon');
 
@@ -26,14 +26,14 @@ export function infoPopover() {
       }
 
       transclude(function(clone, newScope) {
-        var content = document.createElement('div');
+        let content = document.createElement('div');
         content.className = 'markdown-html';
 
         _.each(clone, node => {
           content.appendChild(node);
         });
 
-        var drop = new Drop({
+        let dropOptions = {
           target: elem[0],
           content: content,
           position: position,
@@ -50,11 +50,16 @@ export function infoPopover() {
               },
             ],
           },
-        });
+        };
+
+        // Create drop in next digest after directive content is rendered.
+        scope.$applyAsync(() => {
+          let drop = new Drop(dropOptions);
 
-        var unbind = scope.$on('$destroy', function() {
-          drop.destroy();
-          unbind();
+          let unbind = scope.$on('$destroy', function() {
+            drop.destroy();
+            unbind();
+          });
         });
       });
     },