Add a tooltip under each annotation to name them

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;

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>
+</html>