diff --git a/app/views/templates/_edit_template.html.erb b/app/views/templates/_edit_template.html.erb
index d3a8366..d68a9cc 100644
--- a/app/views/templates/_edit_template.html.erb
+++ b/app/views/templates/_edit_template.html.erb
@@ -12,7 +12,7 @@
       <%= f.label _('Description'), for: template.description %>
       <%= text_area_tag("template-desc", template.description, class: "input-large tinymce") %>
       <div class="inline">
-        <a href="#" data-toggle="popover" rel: "popover" data-html: "true" role="button" 
+        <a href="#" data-toggle="popover" rel="popover" data-html="true" role="button" 
            data-content="<%= _('Enter a description that helps you to differentiate between templates e.g. if you have ones for different audiences') %>" aria-label="<% _('More information: Template descriptions') %>">
         <span class="fa fa-question-circle" aria-hidden="true"></span></a>
       </div>
diff --git a/lib/assets/javascripts/dmproadmap/utils.js b/lib/assets/javascripts/dmproadmap/utils.js
index 8aff27d..170962a 100644
--- a/lib/assets/javascripts/dmproadmap/utils.js
+++ b/lib/assets/javascripts/dmproadmap/utils.js
@@ -20,28 +20,29 @@
   });
   
   // Display tooltips when the item has focus or hover
-  $("[data-toggle='tooltip']").on('focus', function(e){
-    if($(this).attr('data-content') != undefined){
+  $("[data-toggle='tooltip']").on('click', function(e){
+    e.preventDefault();
+  });
+  $("[data-toggle='tooltip']").on('focus mouseenter', function(e){
+    e.preventDefault();
+    if($(this).attr('data-content') !== undefined){
       var y = $(this).width() + 35;
-      $(this).parent().append('<div class="tooltip-message" style="left: ' + y + 'px;">' + $(this).attr('data-content') + '</div>');
+      $(this).after('<div class="tooltip-message" style="left: ' + y + 'px;">' + $(this).attr('data-content') + '</div>');
     }
-  }).on('blur', function(e){
+  }).on('blur mouseleave', function(e){
     $(this).parent().find('div.tooltip-message').remove();
   });
-  
-  // Display tooltips when the item has focus or hover
+  // Display popover when the item has focus or hover
   $("[data-toggle='popover']").on('click', function(e){
     e.preventDefault();
-    
-    if($(this).attr('data-content') != undefined){
-      if($(this).parent().find(".popover-message").length > 0){
-        $(this).parent().find(".popover-message").remove();
-      }else{
-        var y = $(this).width() + 35;
-        $(this).parent().append('<div class="popover-message" style="left: ' + y + 'px;">' + $(this).attr('data-content') + '</div>');
-      }
+  });
+  $("[data-toggle='popover']").on('focus mouseenter', function(e){
+    e.preventDefault();
+    if($(this).attr('data-content') !== undefined){
+      var y = $(this).width() + 35;
+      $(this).after('<div class="popover-message" style="left: ' + y + 'px;">' + $(this).attr('data-content') + '</div>');
     }
-  }).on('blur', function(e){
+  }).on('blur mouseleave', function(){
     $(this).parent().find('div.popover-message').remove();
   });
 });