[2332] Add info icon that explains related items

This is really a stop gap fix to at least explain to people what
related items are. I think much more could be done here.

ckan/public/css/style.css

@@ -1405,6 +1405,18 @@ body.editresources .error-explanation {
   margin-bottom: 0;
 }
 
+.popover-title {
+  margin-bottom: 0;
+}
+
+.popover-inner {
+  background: #aaa;
+}
+
+.popover.right .arrow {
+  border-right-color: #aaa;
+}
+
 /* Chosen Form Styles */
 
 .chzn-container-single {
@@ -1420,6 +1432,13 @@ body.editresources .error-explanation {
   color: #808080;
 }
 
+.related-help {
+  opacity: 0.3;
+  position: relative;
+  top: 2px;
+  cursor: pointer;
+}
+
 .thumbnails li {
   z-index: 0;
   position: relative;

ckan/public/scripts/application.js

@@ -1157,6 +1157,8 @@ CKAN.Utils = function($, my) {
 
 
   my.relatedSetup = function(form) {
+    $('[rel=popover]').popover();
+
     function addAlert(msg) {
       $('<div class="alert alert-error" />').html(msg).hide().prependTo(form).fadeIn();
     }

ckan/templates/package/related_list.html

@@ -18,12 +18,12 @@
   - Related</py:def>
 
   <py:def function="page_heading" property="dc:title">
-    ${c.pkg_dict['title']} - Related
+  ${c.pkg_dict['title']} - Related
   </py:def>
 
   <div py:match="content">
     ${add_related(c.pkg)}
-    <h3>Related items <a class="btn btn-small btn-primary pull-right" data-toggle="modal" href=".modal-add-related" py:if="c.user"><i class="icon-plus-sign icon-white"></i> Add related item</a></h3>
+    <h3>Related items <i class="related-help icon-info-sign" rel="popover" data-content="These are applications, ideas and visualisations that are using this dataset." data-original-title="What are related items?"></i> <a class="btn btn-small btn-primary pull-right" data-toggle="modal" href=".modal-add-related" py:if="c.user"><i class="icon-plus-sign icon-white"></i> Add related item</a></h3>
     <div>
       <div py:if="not c.pkg.related" class="span8 no-related-items">
           There are no related items here yet<span py:if="c.user">, why not <a data-toggle="modal" href=".modal-add-related">add one</a>?</span>