feat(client): 投稿フォームのボタンの説明を表示するように (#6408)

* Add title attr with buttons on the post form

* fix

* tooltip

* missing ;

* remove title attr

* fix bug

* Update reactions-viewer.details.vue

* help wip

* ok!

* i18n

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

src/client/directives/index.ts

@@ -4,9 +4,11 @@ import userPreview from './user-preview';
 import autocomplete from './autocomplete';
 import size from './size';
 import particle from './particle';
+import tooltip from './tooltip';
 
 Vue.directive('autocomplete', autocomplete);
 Vue.directive('userPreview', userPreview);
 Vue.directive('user-preview', userPreview);
 Vue.directive('size', size);
 Vue.directive('particle', particle);
+Vue.directive('tooltip', tooltip);

src/client/directives/tooltip.ts

@@ -0,0 +1,62 @@
+import MkTooltip from '../components/ui/tooltip.vue';
+import { isDeviceTouch } from '../scripts/is-device-touch';
+
+const start = isDeviceTouch ? 'touchstart' : 'mouseover';
+const end = isDeviceTouch ? 'touchend' : 'mouseleave';
+
+export default {
+	bind(el: HTMLElement, binding, vn) {
+		const self = (el as any)._tooltipDirective_ = {} as any;
+
+		self.text = binding.value as string;
+		self.tag = null;
+		self.showTimer = null;
+		self.hideTimer = null;
+		self.checkTimer = null;
+
+		self.close = () => {
+			if (self.tag) {
+				clearInterval(self.checkTimer);
+				self.tag.close();
+				self.tag = null;
+			}
+		};
+
+		const show = e => {
+			if (!document.body.contains(el)) return;
+			if (self.tag) return;
+
+			self.tag = new MkTooltip({
+				parent: vn.context,
+				propsData: {
+					text: self.text,
+					source: el
+				}
+			}).$mount();
+
+			document.body.appendChild(self.tag.$el);
+		};
+
+		el.addEventListener(start, () => {
+			clearTimeout(self.showTimer);
+			clearTimeout(self.hideTimer);
+			self.showTimer = setTimeout(show, 300);
+		});
+
+		el.addEventListener(end, () => {
+			clearTimeout(self.showTimer);
+			clearTimeout(self.hideTimer);
+			self.hideTimer = setTimeout(self.close, 300);
+		});
+
+		el.addEventListener('click', () => {
+			clearTimeout(self.showTimer);
+			self.close();
+		});
+	},
+
+	unbind(el, binding, vn) {
+		const self = el._tooltipDirective_;
+		clearInterval(self.checkTimer);
+	},
+};