Using Tippy.js for directive tooltips.

assets/js/main.js

@@ -2,6 +2,7 @@ import config from 'config';
 import { createApp } from 'vue';
 import dayjs from 'dayjs';
 import mitt from 'mitt';
+import tippy from 'tippy.js';
 
 import router from './router';
 import initStore from './store';
@@ -11,6 +12,7 @@ import initAuthObservers from './auth/observers';
 import { formatDate, formatDuration } from './format';
 
 import '../css/style.scss';
+import 'tippy.js/dist/tippy.css';
 
 import Container from '../components/container/container.vue';
 import Icon from '../components/icon/icon.vue';
@@ -123,8 +125,17 @@ async function init() {
 
 	app.directive('tooltip', {
 		beforeMount(el, binding) {
-			// console.log(binding.modifiers);
-			el.title = binding.value; // eslint-disable-line no-param-reassign
+			// don't include HTML in native title attribute
+			const textEl = document.createElement('div');
+			textEl.innerHTML = binding.value;
+
+			el.title = textEl.textContent; // eslint-disable-line no-param-reassign
+
+			tippy(el, {
+				content: binding.value,
+				allowHTML: true,
+				duration: [0, 0],
+			});
 		},
 	});