From 3cfa22f5f3be0663d1429e9290f00a51988d84fe Mon Sep 17 00:00:00 2001
From: Guillaume Claret <dev@clarus.me>
Date: Fri, 21 Jun 2019 10:37:47 +0200
Subject: [PATCH] Add a tooltip under each annotation to name them

---
 app/server/static/components/annotator.vue | 15 ++++++++++++++-
 app/server/templates/base.html             |  3 ++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/server/static/components/annotator.vue b/app/server/static/components/annotator.vue
index d692182c..a447a9f3 100644
--- a/app/server/static/components/annotator.vue
+++ b/app/server/static/components/annotator.vue
@@ -2,7 +2,8 @@
   div(@click="setSelectedRange")
     span.text-sequence(
       v-for="r in chunksWithLabel"
-      v-bind:class="{ tag: id2label[r.label].text_color }"
+      v-bind:class="getChunkClass(r)"
+      v-bind:data-tooltip="id2label[r.label].text"
       v-bind:style="{ \
         color: id2label[r.label].text_color, \
         backgroundColor: id2label[r.label].background_color \
@@ -83,6 +84,18 @@ export default {
   },
 
   methods: {
+    getChunkClass(chunk) {
+      if (!chunk.id) {
+        return {};
+      }
+
+      const label = this.id2label[chunk.label];
+      return [
+        'tooltip is-tooltip-bottom',
+        { tag: label.text_color },
+      ];
+    },
+
     setSelectedRange() {
       let start;
       let end;
diff --git a/app/server/templates/base.html b/app/server/templates/base.html
index cae51b39..12925c69 100644
--- a/app/server/templates/base.html
+++ b/app/server/templates/base.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-extensions@4.0.1/bulma-divider/dist/css/bulma-divider.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-extensions@4.0.1/bulma-checkradio/dist/css/bulma-checkradio.min.css" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-extensions@4.0.1/bulma-tooltip/dist/css/bulma-tooltip.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="{% static 'assets/css/forum.css' %}">
   <!-- favicon settings -->
   <link rel="apple-touch-icon" sizes="57x57" href="{% static 'static/apple-icon-57x57.png' %}">
@@ -99,4 +100,4 @@
   
   {% block footer %}{% endblock %}
 </body>
-</html>
\ No newline at end of file
+</html>