feat: switch to native browser tooltips

Signed-off-by: Luka Trovic <[email protected]>
nextcloud · Dec 29, 2023 · 2656067 · 2656067
1 parent b4bd569
commit 2656067
Show file tree

Hide file tree

Showing 7 changed files with 8 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -179,17 +179,14 @@
 </template>
 
 <script>
-import { NcModal, Tooltip } from '@nextcloud/vue'
+import { NcModal } from '@nextcloud/vue'
 import { isMobilePlatform } from '../helpers/platform.js'
 
 export default {
 	name: 'HelpModal',
 	components: {
 		NcModal,
 	},
-	directives: {
-		Tooltip,
-	},
 	data() {
 		return {
 			formatted: {

diff --git 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
@@ -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
@@ -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"