From 265606776c727bac5c73dd141c4ac3aa7d7a5da2 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     |  6 +-----
 src/components/Editor/Status.vue          | 10 +++-------
 src/components/HelpModal.vue              |  5 +----
 src/components/Menu/ActionList.vue        |  2 +-
 src/components/Menu/BaseActionEntry.js    |  4 ----
 src/components/Menu/EmojiPickerAction.vue |  3 +--
 7 files changed, 8 insertions(+), 28 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..35aa351efe0 100644
--- a/src/components/Editor/SessionList.vue
+++ b/src/components/Editor/SessionList.vue
@@ -23,7 +23,6 @@
 <template>
 	<NcPopover class="session-list" placement="bottom">
 		<button slot="trigger"
-			v-tooltip.bottom="label"
 			:title="label"
 			:aria-label="label"
 			class="avatar-list">
@@ -64,7 +63,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 +75,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/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..94b2758ec26 100644
--- a/src/components/Menu/EmojiPickerAction.vue
+++ b/src/components/Menu/EmojiPickerAction.vue
@@ -24,8 +24,7 @@
 		:data-text-action-entry="actionEntry.key"
 		:container="menuIDSelector"
 		@select-data="addEmoji">
-		<NcButton v-tooltip="actionEntry.label"
-			class="entry-action__button"
+		<NcButton class="entry-action__button"
 			role="menu"
 			:title="actionEntry.label"
 			:aria-label="actionEntry.label"