Use popovers instead of dialogs for help

The popovers are triggered by hovering over the icon. Once the cursor
leaves the icon, the popover is hidden. The only exception is if the
cursor moved over the actual popover, in which case it will disappear
only after the cursor left it.

JIRA: PDC-1115

pdc/apps/compose/templates/compose_list.html

@@ -3,9 +3,11 @@
 {% load pdctags %}
 
 {% block content %}
-{% include "help_button.html" %}
 
-<h2 class="page-header">{% trans "Composes" %}</h2>
+<h2 class="page-header">
+    {% trans "Composes" %}
+    {% include "help_button.html" %}
+</h2>
 
 <form method="GET" style="float: left;">
   {% csrf_token %}
@@ -17,7 +19,7 @@ <h2 class="page-header">{% trans "Composes" %}</h2>
 {% include "compose_list_include.html" %}
 {% include "pagination.html" %}
 
-{% helpmodal %}
+{% helppopover %}
     <p>A <em>compose</em> is a snapshot of a
     <a href="{% url "release/index" %}">release</a> with unique identifier
     derived from release identifier and date.</p>
@@ -26,6 +28,6 @@ <h2 class="page-header">{% trans "Composes" %}</h2>
     metadata like <code>.treeinfo</code>, repodata etc.</p>
 
     <p>Like a release, a compose is divided into <em>variants</em>.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 {% endblock %}

pdc/apps/compose/templates/overrides_form.html

@@ -4,9 +4,11 @@
 
 {% block content %}
 
-{% include "help_button.html" %}
 
-<h1 class="page-header">Override management for <strong>{{ package }}</strong> in <strong>{{ release_id }}</strong></h1>
+<h1 class="page-header">
+    Override management for <strong>{{ package }}</strong> in <strong>{{ release_id }}</strong>
+    {% include "help_button.html" %}
+</h1>
 
 <p>Based on <strong>{{ compose.compose_id }}</strong></p>
 
@@ -173,7 +175,7 @@ <h3>Unused overrides</h3>
 {% endif %}
 
 
-{% helpmodal %}
+{% helppopover %}
     <table class="table">
       <thead>
         <tr>
@@ -204,7 +206,7 @@ <h3>Unused overrides</h3>
     non-existing compose RPM can only exist if they have
     <code>do_not_delete</code> set to to <code>True</code>. Such overrides are
     listed below the form.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 
 {% endblock %}

pdc/apps/release/templates/base_product_list.html

@@ -3,9 +3,11 @@
 {% load pdctags %}
 
 {% block content %}
-{% include "help_button.html" %}
 
-<h2 class="page-header">{% trans "Base Products" %}</h2>
+<h2 class="page-header">
+    {% trans "Base Products" %}
+    {% include "help_button.html" %}
+</h2>
 
 <form method="GET" style="float: left;">
   {% csrf_token %}
@@ -17,13 +19,13 @@ <h2 class="page-header">{% trans "Base Products" %}</h2>
 {% include "base_product_list_include.html" %}
 {% include "pagination.html" %}
 
-{% helpmodal %}
+{% helppopover %}
     <p>A <em>base product</em> represents the operating system on which a
     <a href="{% url "release/index" %}">release</a> is supposed to run on.</p>
 
     <p>In reality, base products often correspond to
     <a href="{% url "product_version/index" %}">product version</a>
     of that OS.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 {% endblock %}

pdc/apps/release/templates/product_list.html

@@ -3,9 +3,11 @@
 {% load pdctags %}
 
 {% block content %}
-{% include "help_button.html" %}
 
-<h2 class="page-header">{% trans "Products" %}</h2>
+<h2 class="page-header">
+    {% trans "Products" %}
+    {% include "help_button.html" %}
+</h2>
 
 <form method="GET" style="float: left;">
   {% csrf_token %}
@@ -17,13 +19,13 @@ <h2 class="page-header">{% trans "Products" %}</h2>
 {% include "product_list_include.html" %}
 {% include "pagination.html" %}
 
-{% helpmodal %}
+{% helppopover %}
     <p>In PDC, a <em>product</em> is just a group of
     <a href="{% url "product_version/index" %}">product versions</a> with the
     same name.</p>
 
     <p>Products are only used for grouping and organizing releases. They do not
     have any metadata on their own.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 {% endblock %}

pdc/apps/release/templates/product_version_list.html

@@ -3,9 +3,11 @@
 {% load pdctags %}
 
 {% block content %}
-{% include "help_button.html" %}
 
-<h2 class="page-header">{% trans "Product Versions" %}</h2>
+<h2 class="page-header">
+    {% trans "Product Versions" %}
+    {% include "help_button.html" %}
+</h2>
 
 <form method="GET" style="float: left;">
   {% csrf_token %}
@@ -17,13 +19,13 @@ <h2 class="page-header">{% trans "Product Versions" %}</h2>
 {% include "product_version_list_include.html" %}
 {% include "pagination.html" %}
 
-{% helpmodal %}
+{% helppopover %}
     <p>In PDC, a <em>product version</em> is just a group of
     <a href="{% url "release/index" %}">releases</a>
     with the same name and major version.</p>
 
     <p>Product versions are only used for grouping and organizing releases.
     They do not have any metadata on their own.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 {% endblock %}

pdc/apps/release/templates/release_list.html

@@ -3,9 +3,11 @@
 {% load pdctags %}
 
 {% block content %}
-{% include "help_button.html" %}
 
-<h2 class="page-header">{% trans "Releases" %}</h2>
+<h2 class="page-header">
+    {% trans "Releases" %}
+    {% include "help_button.html" %}
+</h2>
 
 <form method="GET" style="float: left;">
   {% csrf_token %}
@@ -17,7 +19,7 @@ <h2 class="page-header">{% trans "Releases" %}</h2>
 {% include "release_list_include.html" %}
 {% include "pagination.html" %}
 
-{% helpmodal %}
+{% helppopover %}
     <p>A <em>release</em> is a collection of software with a unique identity
     and specific life cycle.</p>
 
@@ -28,6 +30,6 @@ <h2 class="page-header">{% trans "Releases" %}</h2>
     release content targetted at a specific user, for example <em>server</em>
     or <em>workstation</em>. Each variant can be built for multiple
     architectures.</p>
-{% endhelpmodal %}
+{% endhelppopover %}
 
 {% endblock %}

pdc/apps/utils/templatetags/pdctags.py

@@ -26,31 +26,31 @@ def login_url(redirect=None):
     return url
 
 
-def do_help_modal(parser, token):
-    nodelist = parser.parse(('endhelpmodal',))
+def do_help_popover(parser, token):
+    nodelist = parser.parse(('endhelppopover',))
     parser.delete_first_token()
-    return HelpModalNode(nodelist)
+    return HelpPopoverNode(nodelist)
 
 
-class HelpModalNode(template.Node):
-    """Create a Bootstrap modal dialog with help.
+class HelpPopoverNode(template.Node):
+    """Create a Bootstrap popover with help.
 
     Use the ``help_button.html`` template to create a button to display this
     dialog.
 
     To use it, just wrap the dialog contents with template tags like ::
 
-        {% helpmodal %}
-            Contents of the dialog...
-        {% endhelpmodal %}
+        {% helppopover %}
+            Contents of the popover...
+        {% endhelppopover %}
 
-    On each page, there can be only one dialog created using this tag.
+    On each page, there can be only one popover created using this tag.
     """
     def __init__(self, nodelist):
         self.nodelist = nodelist
 
     def render(self, context):
-        t = get_template('help_modal.html')
+        t = get_template('help_popover.html')
         output = self.nodelist.render(context)
         context['content'] = output
         return t.render(context)
@@ -60,4 +60,4 @@ def render(self, context):
 
 register.simple_tag(pdc_version)
 register.simple_tag(login_url)
-register.tag('helpmodal', do_help_modal)
+register.tag('helppopover', do_help_popover)

pdc/static/pdc/style.css

@@ -67,3 +67,11 @@ ul.pagination.pull-right {
 .help-button {
     margin-top: 1em;
 }
+/* Increase width of popovers and add some shadow */
+.popover {
+    max-width: 30%;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
+}
+.popover-content {
+    font-size: 12px;
+}

pdc/templates/help_button.html

@@ -1,3 +1,3 @@
-<button class="btn btn-default btn-lg pull-right help-button" data-toggle="modal" data-target="#helpOverlay">
-    <span class="glyphicon glyphicon-question-sign"></span> Help
+<button class="help-trigger btn btn-link btn-lg">
+    <span class="glyphicon glyphicon-question-sign"></span>
 </button>

pdc/templates/help_popover.html

@@ -0,0 +1,23 @@
+<div class="hidden help-content">{{ content }}</div>
+
+<script type="text/javascript">
+var mouseIn = false;
+const timeout = 500;
+$("body").on('mouseenter', ".popover", function () { mouseIn = true });
+$("body").on('mouseleave', ".popover", function () { mouseIn = false });
+$(".help-trigger").popover({
+    content: function () { return $(".help-content").html(); },
+    html: true,
+    trigger: 'hover',
+    delay: {hide: timeout},
+    viewport: {selector: "body", padding: 100},
+}).on('hide.bs.popover', function () {
+    if (mouseIn) {
+        $('.popover').on('mouseleave', function() {
+                setTimeout(function () {
+                        $('.help-trigger').popover('hide');
+                        }, timeout)});
+        return false;
+    }
+});
+</script>