display assignee tooltip to show full name

resources/assets/vue/components/task/elements/TaskDetailsComponent.vue

@@ -154,7 +154,7 @@
                                                             <div class="row mt-2" v-if="task.assignees.departments.length">
                                                                 <div class="col">
                                                                     <div class="mr-2 mb-1 d-inline-block text-center assignee-avatar"  v-for="assignee in task.assignees.departments">
-                                                                        <avatar :size="30" :username="assignee.name"></avatar>
+                                                                        <avatar :size="30" :username="assignee.name" data-toggle="tooltip" data-placement="bottom" :title="assignee.name"></avatar>
                                                                     </div>
                                                                 </div>
                                                             </div>
@@ -243,6 +243,9 @@
                 this.task = this.data;
             }
         },
+        mounted(){
+            $('[data-toggle="tooltip"]').tooltip()
+        },
         methods: {
             startTimer(){
                 this.submit(this.route('api.task.timer.start', this.task.id), 'post', null, true, true)
@@ -263,3 +266,8 @@
         }
     }
 </script>
+<style>
+    .tooltip {
+        font-size: 10px;
+    }
+</style>