diff --git a/qurator/dinglehopper/cli.py b/qurator/dinglehopper/cli.py
index 13543a5..ea0c9bb 100644
--- a/qurator/dinglehopper/cli.py
+++ b/qurator/dinglehopper/cli.py
@@ -22,9 +22,11 @@ def gen_diff_report(gt_in, ocr_in, css_prefix, joiner, none):
html_t = escape(t)
html_custom_attrs = ""
- # XXX must sanitize id_ or do we trust the XML?
+
+ # Set Bootstrap tooltip to the segment id
if id_:
- html_custom_attrs = 'data-segment-id="{}"'.format(id_)
+ html_custom_attrs += 'data-toggle="tooltip" title="{}"'.format(id_)
+ # XXX must sanitize id_ or do we trust the XML?
if css_classes:
return '{html_t}'.format(css_classes=css_classes, html_t=html_t, html_custom_attrs=html_custom_attrs)
@@ -70,8 +72,8 @@ def gen_diff_report(gt_in, ocr_in, css_prefix, joiner, none):
return \
'''
'''.format(gtx, ocrx)
diff --git a/qurator/dinglehopper/templates/report.html.j2 b/qurator/dinglehopper/templates/report.html.j2
index f829ef8..0c2f464 100644
--- a/qurator/dinglehopper/templates/report.html.j2
+++ b/qurator/dinglehopper/templates/report.html.j2
@@ -26,13 +26,6 @@
border: 2px solid;
border-radius: 5px;
}
- .status-box {
- position: fixed;
- background: grey;
- color: white;
- width: 100%;
- height: 2em;
- }
diff --git a/qurator/dinglehopper/templates/report.html.js b/qurator/dinglehopper/templates/report.html.js
index 0baaa30..4c2ba28 100644
--- a/qurator/dinglehopper/templates/report.html.js
+++ b/qurator/dinglehopper/templates/report.html.js
@@ -1,19 +1,15 @@
function find_diff_class(classes) {
- return classes.split(/\s+/).find(x => x.match(/.diff\d.*/));
+ return $('.' + classes.split(/\s+/).find(x => x.match(/.diff\d.*/)));
}
$(document).ready(function() {
- $('.diff').mouseover(function() {
- let c = find_diff_class($(this).attr('class'));
- $('.' + c).addClass('diff-highlight');
+ /* Enable Bootstrap tooltips */
+ $('[data-toggle="tooltip"]').tooltip();
- segment_id = $(this).attr('data-segment-id');
- $(this).closest('div').find('.status-box').text(segment_id);
+ $('.diff').mouseover(function() {
+ find_diff_class($(this).attr('class')).addClass('diff-highlight');
});
$('.diff').mouseout(function() {
- let c = find_diff_class($(this).attr('class'));
- $('.' + c).removeClass('diff-highlight');
-
- $(this).closest('div').find('.status-box').text('');
+ find_diff_class($(this).attr('class')).removeClass('diff-highlight');
});
});