Add tooltips to markdown help texts

rdmo/core/serializers.py

@@ -1,12 +1,8 @@
-from markdown import markdown as markdown_function
-
 from django.contrib.auth.models import Group
 from django.contrib.sites.models import Site
-from django.utils.encoding import force_text
-
 from rest_framework import serializers
 
-from rdmo.core.utils import get_languages
+from rdmo.core.utils import get_languages, markdown2html
 
 
 class RecursiveField(serializers.Serializer):
@@ -36,7 +32,7 @@ def to_representation(self, instance):
 
         for markdown_field in self.markdown_fields:
             if markdown_field in response and response[markdown_field]:
-                response[markdown_field] = markdown_function(force_text(response[markdown_field]))
+                response[markdown_field] = markdown2html(response[markdown_field])
 
         return response
 

rdmo/core/static/core/css/base.scss

@@ -100,6 +100,12 @@ code {
     }
 }
 
+u {
+    cursor: help;
+    text-decoration: underline;
+    text-decoration-style: dashed;
+}
+
 table {
     p {
         margin-bottom: 5px;

rdmo/core/templatetags/core_tags.py

@@ -6,13 +6,12 @@
 from django.urls import resolve, reverse
 from django.urls.resolvers import Resolver404
 from django.utils import translation
-from django.utils.encoding import force_text
 from django.utils.html import escape
 from django.utils.safestring import mark_safe
 from django.utils.translation import get_language, to_locale
-from markdown import markdown as markdown_function
 
 from rdmo import __version__
+from rdmo.core.utils import markdown2html
 
 register = template.Library()
 
@@ -160,7 +159,7 @@ def back_to_project_link(context):
 @register.filter(is_safe=True)
 @stringfilter
 def markdown(value):
-    return mark_safe(markdown_function(force_text(value)))
+    return mark_safe(markdown2html(value))
 
 
 @register.simple_tag

rdmo/core/utils.py

@@ -12,7 +12,9 @@
 from django.conf import settings
 from django.http import Http404, HttpResponse, HttpResponseBadRequest
 from django.template.loader import get_template
+from django.utils.encoding import force_text
 from django.utils.translation import ugettext_lazy as _
+from markdown import markdown
 
 log = logging.getLogger(__name__)
 
@@ -300,3 +302,14 @@ def human2bytes(string):
         return number * 1024**4
     elif unit == 'pib':
         return number * 1024**5
+
+
+def markdown2html(markdown_string):
+    # adoption of the normal markdown function which also converts
+    # `[<string>]{<title>}` to <u title="<title>"><string></u> to
+    # allow for underlined tooltips
+    html = markdown(force_text(markdown_string))
+    html = re.sub(r'\[(.*?)\]\{(.*?)\}',
+                  r'<u data-toggle="tooltip" data-placement="bottom" data-html="true" title="\2">\1</u>',
+                  html)
+    return html

rdmo/projects/static/projects/js/project_questions/services.js

@@ -136,6 +136,9 @@ angular.module('project_questions')
                 $window.scrollTo(0, 0);
                 back = false;
 
+                $timeout(function() {
+                    $('[data-toggle="tooltip"]').tooltip();
+                });
             }, function (result) {
                 if (result === false) {
                     // checkConditions returned $q.reject

rdmo/projects/templates/projects/project_detail.html

@@ -7,6 +7,12 @@
     {% compress css %}
     <link rel="stylesheet" href="{% static 'projects/css/project.scss' %}" type="text/x-scss" />
     {% endcompress %}
+
+    <script>
+    $(function () {
+      $('[data-toggle="tooltip"]').tooltip()
+    })
+    </script>
 {% endblock %}
 
 {% block sidebar %}