Add comments popover

templates/faceshieldrequest_list.html

@@ -3,4 +3,18 @@
   {{ super() }}
   <a href="{{ url_for('map.index', id=row.id) }}" class="icon" title="Show on map"><span class="glyphicon glyphicon-map-marker"></span></a>
   <a href="{{ url_for('faceshieldrequest.label', id=row.id) }}" class="icon" title="Render package label"><span class="glyphicon glyphicon-print"></span></a>
+  <a class="icon" role="button" data-toggle="popover" data-html="true" data-content="<b>Extras:</b><br />{{ row.extra or '' }}<hr><b>Remarks:</b><br />{{ row.remarks or '' }}"><span class="glyphicon glyphicon-comment"></span></a>
+{% endblock %}
+
+{% block head_css %}{{ super() }}
+<style>
+.popover { max-width: 400px; }
+</style>
+{% endblock %}
+{% block tail_js %}{{ super() }}
+<script>
+$(function () {
+    $('[data-toggle="popover"]').popover({ trigger: "hover click" })
+})
+</script>
 {% endblock %}