From b161aac3fd2b9ff6df6d87cd60261e1682a97f9c Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Fri, 29 Dec 2023 20:10:01 +0100
Subject: [PATCH] feat: switch to native browser tooltips

Signed-off-by: Luka Trovic <luka@nextcloud.com>
---
 src/components/Editor/GuestNameDialog.vue     |  6 +----
 src/components/Editor/SessionList.vue         | 27 +++++++++----------
 src/components/Editor/Status.vue              | 10 +++----
 src/components/HelpModal.vue                  |  5 +---
 .../Menu/ActionAttachmentUpload.vue           |  1 +
 src/components/Menu/ActionInsertLink.vue      |  1 +
 src/components/Menu/ActionList.vue            |  2 +-
 src/components/Menu/BaseActionEntry.js        |  4 ---
 src/components/Menu/EmojiPickerAction.vue     | 21 ++++++++-------
 9 files changed, 31 insertions(+), 46 deletions(-)

diff --git a/src/components/Editor/GuestNameDialog.vue b/src/components/Editor/GuestNameDialog.vue
index f0b061da084..e7856668cec 100644
--- a/src/components/Editor/GuestNameDialog.vue
+++ b/src/components/Editor/GuestNameDialog.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<form v-tooltip="t('text', 'Enter your name so other people can see who is editing')" class="guest-name-dialog" @submit.prevent="setGuestName()">
+	<form :title="t('text', 'Enter your name so other people can see who is editing')" class="guest-name-dialog" @submit.prevent="setGuestName()">
 		<label><AvatarWrapper :session="session" :size="32" /></label>
 		<input v-model="guestName"
 			type="text"
@@ -35,7 +35,6 @@
 </template>
 
 <script>
-import { Tooltip } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import AvatarWrapper from './AvatarWrapper.vue'
 import { useSyncServiceMixin } from '../Editor.provider.js'
@@ -45,9 +44,6 @@ export default {
 	components: {
 		AvatarWrapper,
 	},
-	directives: {
-		tooltip: Tooltip,
-	},
 	mixins: [
 		useSyncServiceMixin,
 	],
diff --git a/src/components/Editor/SessionList.vue b/src/components/Editor/SessionList.vue
index 05a759956e6..6390e62874d 100644
--- a/src/components/Editor/SessionList.vue
+++ b/src/components/Editor/SessionList.vue
@@ -22,17 +22,17 @@
 
 <template>
 	<NcPopover class="session-list" placement="bottom">
-		<button slot="trigger"
-			v-tooltip.bottom="label"
-			:title="label"
-			:aria-label="label"
-			class="avatar-list">
-			<div class="avatardiv icon-group" />
-			<AvatarWrapper v-for="session in sessionsVisible"
-				:key="session.id"
-				:session="session"
-				:size="40" />
-		</button>
+		<div slot="trigger">
+			<button :title="label"
+				:aria-label="label"
+				class="avatar-list">
+				<div class="avatardiv icon-group" />
+				<AvatarWrapper v-for="session in sessionsVisible"
+					:key="session.id"
+					:session="session"
+					:size="40" />
+			</button>
+		</div>
 		<template #default>
 			<div class="session-menu">
 				<slot name="lastSaved" />
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import { NcPopover, Tooltip } from '@nextcloud/vue'
+import { NcPopover } from '@nextcloud/vue'
 import AvatarWrapper from './AvatarWrapper.vue'
 import { mapActions, mapState } from 'vuex'
 import store from '../../mixins/store.js'
@@ -76,9 +76,6 @@ export default {
 		AvatarWrapper,
 		NcPopover,
 	},
-	directives: {
-		tooltip: Tooltip,
-	},
 	mixins: [store],
 	props: {
 		sessions: {
diff --git a/src/components/Editor/Status.vue b/src/components/Editor/Status.vue
index 18393fadd82..878103a724c 100644
--- a/src/components/Editor/Status.vue
+++ b/src/components/Editor/Status.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="text-editor__session-list">
-		<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="saveStatusClass">
+		<div :title="lastSavedStatusTooltip" class="save-status" :class="saveStatusClass">
 			<NcButton type="tertiary"
 				:aria-label="t('text', 'Save document')"
 				@click="onClickSave">
@@ -45,7 +45,7 @@
 
 import { ERROR_TYPE } from '../../services/SyncService.js'
 import moment from '@nextcloud/moment'
-import { NcButton, NcSavingIndicatorIcon, Tooltip } from '@nextcloud/vue'
+import { NcButton, NcSavingIndicatorIcon } from '@nextcloud/vue'
 import {
 	useIsMobileMixin,
 	useIsPublicMixin,
@@ -63,10 +63,6 @@ export default {
 		GuestNameDialog: () => import(/* webpackChunkName: "editor-guest" */'./GuestNameDialog.vue'),
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	mixins: [
 		useIsMobileMixin,
 		useIsPublicMixin,
@@ -117,7 +113,7 @@ export default {
 			if (this.dirty || this.hasUnsavedChanges) {
 				message += ' - ' + t('text', 'Unsaved changes')
 			}
-			return { content: message, placement: 'bottom' }
+			return message
 		},
 
 		hasUnsavedChanges() {
diff --git a/src/components/HelpModal.vue b/src/components/HelpModal.vue
index 06d11ee99e9..4d20a80cd61 100644
--- a/src/components/HelpModal.vue
+++ b/src/components/HelpModal.vue
@@ -179,7 +179,7 @@
 </template>
 
 <script>
-import { NcModal, Tooltip } from '@nextcloud/vue'
+import { NcModal } from '@nextcloud/vue'
 import { isMobilePlatform } from '../helpers/platform.js'
 
 export default {
@@ -187,9 +187,6 @@ export default {
 	components: {
 		NcModal,
 	},
-	directives: {
-		Tooltip,
-	},
 	data() {
 		return {
 			formatted: {
diff --git a/src/components/Menu/ActionAttachmentUpload.vue b/src/components/Menu/ActionAttachmentUpload.vue
index a1cf69b533d..24f1509bfee 100644
--- a/src/components/Menu/ActionAttachmentUpload.vue
+++ b/src/components/Menu/ActionAttachmentUpload.vue
@@ -23,6 +23,7 @@
 	<NcActions class="entry-action entry-action__image-upload"
 		:data-text-action-entry="actionEntry.key"
 		:name="actionEntry.label"
+		:title="actionEntry.label"
 		:aria-label="actionEntry.label"
 		:container="menuIDSelector"
 		role="menu"
diff --git a/src/components/Menu/ActionInsertLink.vue b/src/components/Menu/ActionInsertLink.vue
index 15319764ec9..22e1dc77dc7 100644
--- a/src/components/Menu/ActionInsertLink.vue
+++ b/src/components/Menu/ActionInsertLink.vue
@@ -20,6 +20,7 @@
 <template>
 	<NcActions class="entry-action entry-action__insert-link"
 		aria-haspopup
+		:title="actionEntry.label"
 		:aria-label="actionEntry.label"
 		:class="activeClass"
 		:container="menuIDSelector"
diff --git a/src/components/Menu/ActionList.vue b/src/components/Menu/ActionList.vue
index b6bbcbab797..383f52101f2 100644
--- a/src/components/Menu/ActionList.vue
+++ b/src/components/Menu/ActionList.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<NcActions v-tooltip="tooltip"
+	<NcActions :title="tooltip"
 		class="entry-list-action entry-action"
 		role="menu"
 		v-bind="state"
diff --git a/src/components/Menu/BaseActionEntry.js b/src/components/Menu/BaseActionEntry.js
index fc675cfe678..82f9e6d229c 100644
--- a/src/components/Menu/BaseActionEntry.js
+++ b/src/components/Menu/BaseActionEntry.js
@@ -22,7 +22,6 @@
 
 /* eslint-disable jsdoc/valid-types */
 
-import { Tooltip } from '@nextcloud/vue'
 import debounce from 'debounce'
 
 import { useEditorMixin, useIsMobileMixin } from '../Editor.provider.js'
@@ -36,9 +35,6 @@ import './ActionEntry.scss'
  * @type {import("vue").ComponentOptions} BaseActionEntry
  */
 const BaseActionEntry = {
-	directives: {
-		Tooltip,
-	},
 	mixins: [useEditorMixin, useIsMobileMixin, useStore, useOutlineActions, useOutlineStateMixin],
 	props: {
 		actionEntry: {
diff --git a/src/components/Menu/EmojiPickerAction.vue b/src/components/Menu/EmojiPickerAction.vue
index c8a1d33fae1..727a95075c2 100644
--- a/src/components/Menu/EmojiPickerAction.vue
+++ b/src/components/Menu/EmojiPickerAction.vue
@@ -24,16 +24,17 @@
 		:data-text-action-entry="actionEntry.key"
 		:container="menuIDSelector"
 		@select-data="addEmoji">
-		<NcButton v-tooltip="actionEntry.label"
-			class="entry-action__button"
-			role="menu"
-			:title="actionEntry.label"
-			:aria-label="actionEntry.label"
-			:aria-haspopup="true">
-			<template #icon>
-				<component :is="icon" />
-			</template>
-		</NcButton>
+		<div>
+			<NcButton class="entry-action__button"
+				role="menu"
+				:title="actionEntry.label"
+				:aria-label="actionEntry.label"
+				:aria-haspopup="true">
+				<template #icon>
+					<component :is="icon" />
+				</template>
+			</NcButton>
+		</div>
 	</NcEmojiPicker>
 </template>