From 67a5e755089284354a5223bd3307a630af255252 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Mon, 30 Sep 2024 18:15:48 +0200
Subject: [PATCH 1/2] fix: replace v-tooltip with native title

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/AdminSettings/TurnServer.vue   |  7 +----
 .../AdminSettings/WebServerSetupChecks.vue    | 11 ++-----
 .../shared/LocalAudioControlButton.vue        | 29 ++++---------------
 .../shared/LocalVideoControlButton.vue        |  9 ++----
 .../CallView/shared/VideoBottomBar.vue        | 11 ++-----
 .../Matterbridge/MatterbridgeSettings.vue     |  7 +----
 .../MediaSettings/MediaSettings.vue           | 21 +++++---------
 .../Message/MessagePart/FilePreview.vue       | 19 +-----------
 .../NewMessage/NewMessageAudioRecorder.vue    | 28 ++++--------------
 src/components/TopBar/CallButton.vue          | 29 +++----------------
 src/components/TopBar/ReactionMenu.vue        |  9 ++----
 src/components/TopBar/TopBar.vue              |  5 ----
 src/components/TopBar/TopBarMediaControls.vue | 12 +++-----
 src/components/TopBar/TopBarMenu.vue          |  9 ++----
 src/components/UIShared/EditableTextField.vue |  9 ++----
 15 files changed, 44 insertions(+), 171 deletions(-)

diff --git a/src/components/AdminSettings/TurnServer.vue b/src/components/AdminSettings/TurnServer.vue
index 7b0f94fee0b..9e2a381b955 100644
--- a/src/components/AdminSettings/TurnServer.vue
+++ b/src/components/AdminSettings/TurnServer.vue
@@ -19,11 +19,11 @@
 			@input="updateSchemes" />
 
 		<NcTextField ref="turn_server"
-			v-tooltip.auto="turnServerError"
 			name="turn_server"
 			placeholder="turnserver:port"
 			class="turn-server__textfield"
 			:class="{ error: turnServerError }"
+			:title="turnServerError"
 			:value="server"
 			:disabled="loading"
 			:label="t('spreed', 'TURN server URL')"
@@ -92,17 +92,12 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { isCertificateValid } from '../../services/certificateService.js'
 
 export default {
 	name: 'TurnServer',
 
-	directives: {
-		Tooltip,
-	},
-
 	components: {
 		AlertCircle,
 		Check,
diff --git a/src/components/AdminSettings/WebServerSetupChecks.vue b/src/components/AdminSettings/WebServerSetupChecks.vue
index 4118ebc3a1f..a8480cc2ffb 100644
--- a/src/components/AdminSettings/WebServerSetupChecks.vue
+++ b/src/components/AdminSettings/WebServerSetupChecks.vue
@@ -14,10 +14,10 @@
 		<ul class="web-server-setup-checks">
 			<li class="virtual-background">
 				{{ t('spreed', 'Files required for virtual background can be loaded') }}
-				<NcButton v-tooltip="virtualBackgroundAvailableToolTip"
-					type="tertiary"
+				<NcButton type="tertiary"
 					class="vue-button-inline"
 					:class="{'success-button': virtualBackgroundAvailable === true, 'error-button': virtualBackgroundAvailable === false}"
+					:title="virtualBackgroundAvailableTitle"
 					:aria-label="virtualBackgroundAvailableAriaLabel"
 					@click="checkVirtualBackground">
 					<template #icon>
@@ -41,7 +41,6 @@ import { generateFilePath } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { VIRTUAL_BACKGROUND } from '../../constants.js'
 import JitsiStreamBackgroundEffect from '../../utils/media/effects/virtual-background/JitsiStreamBackgroundEffect.js'
@@ -50,10 +49,6 @@ import VirtualBackground from '../../utils/media/pipeline/VirtualBackground.js'
 export default {
 	name: 'WebServerSetupChecks',
 
-	directives: {
-		Tooltip,
-	},
-
 	components: {
 		AlertCircle,
 		NcButton,
@@ -85,7 +80,7 @@ export default {
 			return t('spreed', 'Checking …')
 		},
 
-		virtualBackgroundAvailableToolTip() {
+		virtualBackgroundAvailableTitle() {
 			if (this.virtualBackgroundAvailable === false && !VirtualBackground.isWasmSupported()) {
 				return t('spreed', 'Failed: WebAssembly is disabled or not supported in this browser. Please enable WebAssembly or use a browser with support for it to do the check.')
 			}
diff --git a/src/components/CallView/shared/LocalAudioControlButton.vue b/src/components/CallView/shared/LocalAudioControlButton.vue
index a7872dec56b..ac809d7dce3 100644
--- a/src/components/CallView/shared/LocalAudioControlButton.vue
+++ b/src/components/CallView/shared/LocalAudioControlButton.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcButton v-tooltip="audioButtonTooltip"
+	<NcButton :title="audioButtonTitle"
 		:type="type"
 		:aria-label="audioButtonAriaLabel"
 		:class="{ 'no-audio-available': !model.attributes.audioAvailable }"
@@ -26,7 +26,6 @@ import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import VolumeIndicator from '../../UIShared/VolumeIndicator.vue'
 
@@ -41,10 +40,6 @@ export default {
 		VolumeIndicator,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	props: {
 		conversation: {
 			type: Object,
@@ -81,40 +76,28 @@ export default {
 			return this.model.attributes.audioAvailable && this.model.attributes.audioEnabled
 		},
 
-		audioButtonTooltip() {
+		audioButtonTitle() {
 			if (!this.isAudioAllowed) {
 				return t('spreed', 'You are not allowed to enable audio')
 			}
 
 			if (!this.model.attributes.audioAvailable) {
-				return {
-					content: t('spreed', 'No audio. Click to select device'),
-					show: false,
-				}
+				return t('spreed', 'No audio. Click to select device')
 			}
 
 			if (this.speakingWhileMutedNotification && !this.screenSharingMenuOpen) {
-				return {
-					content: this.speakingWhileMutedNotification,
-					show: true,
-				}
+				return this.speakingWhileMutedNotification
 			}
 
-			let content = ''
 			if (this.model.attributes.audioEnabled) {
-				content = this.disableKeyboardShortcuts
+				return this.disableKeyboardShortcuts
 					? t('spreed', 'Mute audio')
 					: t('spreed', 'Mute audio (M)')
 			} else {
-				content = this.disableKeyboardShortcuts
+				return this.disableKeyboardShortcuts
 					? t('spreed', 'Unmute audio')
 					: t('spreed', 'Unmute audio (M)')
 			}
-
-			return {
-				content,
-				show: false,
-			}
 		},
 
 		audioButtonAriaLabel() {
diff --git a/src/components/CallView/shared/LocalVideoControlButton.vue b/src/components/CallView/shared/LocalVideoControlButton.vue
index 12962ee0670..a2d0eede88e 100644
--- a/src/components/CallView/shared/LocalVideoControlButton.vue
+++ b/src/components/CallView/shared/LocalVideoControlButton.vue
@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<NcButton v-tooltip="videoButtonTooltip"
+	<NcButton :title="videoButtonTitle"
 		:type="type"
 		:aria-label="videoButtonAriaLabel"
 		:class="{ 'no-video-available': !model.attributes.videoAvailable }"
@@ -26,7 +26,6 @@ import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { PARTICIPANT } from '../../../constants.js'
 import BrowserStorage from '../../../services/BrowserStorage.js'
@@ -40,10 +39,6 @@ export default {
 		VideoOff,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	props: {
 		conversation: {
 			type: Object,
@@ -80,7 +75,7 @@ export default {
 			return this.model.attributes.videoAvailable && this.model.attributes.videoEnabled
 		},
 
-		videoButtonTooltip() {
+		videoButtonTitle() {
 			if (!this.isVideoAllowed) {
 				return t('spreed', 'You are not allowed to enable video')
 			}
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index 17ece3951a6..ff438aceacb 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -33,7 +33,7 @@
 				group>
 				<NcButton v-if="showAudioIndicator"
 					key="audioIndicator"
-					v-tooltip="audioButtonTooltip"
+					:title="audioButtonTooltip"
 					:aria-label="audioButtonTooltip"
 					class="audioIndicator"
 					type="tertiary-no-background"
@@ -47,7 +47,7 @@
 
 				<NcButton v-if="showVideoIndicator"
 					key="videoIndicator"
-					v-tooltip="videoButtonTooltip"
+					:title="videoButtonTooltip"
 					:aria-label="videoButtonTooltip"
 					class="videoIndicator"
 					type="tertiary-no-background"
@@ -60,7 +60,7 @@
 
 				<NcButton v-if="showScreenSharingIndicator"
 					key="screenSharingIndicator"
-					v-tooltip="t('spreed', 'Show screen')"
+					:title="t('spreed', 'Show screen')"
 					:aria-label="t('spreed', 'Show screen')"
 					class="screenSharingIndicator"
 					:class="{'screen-visible': sharedData.screenVisible}"
@@ -101,7 +101,6 @@ import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 
@@ -123,10 +122,6 @@ export default {
 		VideoOff,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	inheritAttrs: false,
 
 	props: {
diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
index a95c4dba20d..ac2a56f655e 100644
--- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
+++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -43,8 +43,8 @@
 						({{ processStateText }})
 					</NcCheckboxRadioSwitch>
 					<NcButton v-if="enabled"
-						v-tooltip.top="{ content: t('spreed', 'Show Matterbridge log') }"
 						type="tertiary"
+						:title="t('spreed', 'Show Matterbridge log')"
 						:aria-label="t('spreed', 'Show Matterbridge log')"
 						@click="showLogContent">
 						<template #icon>
@@ -94,7 +94,6 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadi
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import BridgePart from './BridgePart.vue'
 
@@ -119,10 +118,6 @@ export default {
 		Plus,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	setup() {
 		return {
 			sidebarStore: useSidebarStore(),
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 659ae015791..5a0e72068df 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -44,9 +44,9 @@
 				<!-- Audio and video toggles -->
 				<div class="media-settings__toggles">
 					<!-- Audio toggle -->
-					<NcButton v-tooltip="audioButtonTooltip"
-						type="tertiary"
-						:aria-label="audioButtonTooltip"
+					<NcButton type="tertiary"
+						:title="audioButtonTitle"
+						:aria-label="audioButtonTitle"
 						:disabled="!audioPreviewAvailable"
 						@click="toggleAudio">
 						<template #icon>
@@ -59,9 +59,9 @@
 					</NcButton>
 
 					<!-- Video toggle -->
-					<NcButton v-tooltip="videoButtonTooltip"
-						type="tertiary"
-						:aria-label="videoButtonTooltip"
+					<NcButton type="tertiary"
+						:title="videoButtonTitle"
+						:aria-label="videoButtonTitle"
 						:disabled="!videoPreviewAvailable"
 						@click="toggleVideo">
 						<template #icon>
@@ -193,7 +193,6 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import MediaDevicesSelector from './MediaDevicesSelector.vue'
 import MediaDevicesSpeakerTest from './MediaDevicesSpeakerTest.vue'
@@ -217,10 +216,6 @@ import { localMediaModel } from '../../utils/webrtc/index.js'
 export default {
 	name: 'MediaSettings',
 
-	directives: {
-		Tooltip,
-	},
-
 	components: {
 		AvatarWrapper,
 		Bell,
@@ -361,14 +356,14 @@ export default {
 			return this.videoPreviewAvailable && this.videoOn
 		},
 
-		audioButtonTooltip() {
+		audioButtonTitle() {
 			if (!this.audioPreviewAvailable) {
 				return t('spreed', 'No audio')
 			}
 			return this.audioOn ? t('spreed', 'Mute audio') : t('spreed', 'Unmute audio')
 		},
 
-		videoButtonTooltip() {
+		videoButtonTitle() {
 			if (!this.videoPreviewAvailable) {
 				return t('spreed', 'No camera')
 			}
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index bda35a4c5f8..d2e9defcf47 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -15,7 +15,7 @@
 		v-bind="filePreviewBinding"
 		@click.exact="handleClick"
 		@keydown.enter="handleClick">
-		<span v-tooltip="previewTooltip"
+		<span :title="file.name"
 			class="image-container"
 			:class="{'playable': isPlayable}"
 			:style="imageContainerStyle">
@@ -75,7 +75,6 @@ import { getUploader } from '@nextcloud/upload'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import AudioPlayer from './AudioPlayer.vue'
 import TransitionWrapper from '../../../../UIShared/TransitionWrapper.vue'
@@ -105,10 +104,6 @@ export default {
 		PlayCircleOutline,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	props: {
 		token: {
 			type: String,
@@ -225,18 +220,6 @@ export default {
 			return this.$store.getters.getLocalUrl(this.referenceId)
 		},
 
-		previewTooltip() {
-			if (this.shouldShowFileDetail) {
-				// no tooltip as the file name is already visible directly
-				return null
-			}
-			return {
-				content: this.file.name,
-				delay: { show: 500 },
-				placement: 'left',
-			}
-		},
-
 		// This is used to decide which outer element type to use
 		filePreviewElement() {
 			if (this.isUploadEditor || this.isTemporaryUpload) {
diff --git a/src/components/NewMessage/NewMessageAudioRecorder.vue b/src/components/NewMessage/NewMessageAudioRecorder.vue
index bbf0e281871..35435f0159e 100644
--- a/src/components/NewMessage/NewMessageAudioRecorder.vue
+++ b/src/components/NewMessage/NewMessageAudioRecorder.vue
@@ -6,10 +6,7 @@
 <template>
 	<div class="audio-recorder">
 		<NcButton v-if="!isRecording"
-			v-tooltip.auto="{
-				content: startRecordingTooltip,
-				delay: tooltipDelay,
-			}"
+			:title="startRecordingTooltip"
 			:aria-label="startRecordingTooltip"
 			type="tertiary"
 			:disabled="!canStartRecording"
@@ -19,11 +16,8 @@
 			</template>
 		</NcButton>
 		<div v-else class="wrapper">
-			<NcButton v-tooltip.auto="{
-					content: abortRecordingTooltip,
-					delay: tooltipDelay,
-				}"
-				type="error"
+			<NcButton type="error"
+				:title="abortRecordingTooltip"
 				:aria-label="abortRecordingTooltip"
 				@click="abortRecording">
 				<template #icon>
@@ -35,11 +29,8 @@
 				<span class="time">
 					{{ parsedRecordTime }}</span>
 			</div>
-			<NcButton v-tooltip.auto="{
-					content: stopRecordingTooltip,
-					delay: tooltipDelay,
-				}"
-				type="success"
+			<NcButton type="success"
+				:title="stopRecordingTooltip"
 				:aria-label="stopRecordingTooltip"
 				:class="{'audio-recorder__trigger--recording': isRecording}"
 				@click="stop">
@@ -62,7 +53,6 @@ import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { mediaDevicesManager } from '../../utils/webrtc/index.js'
 
@@ -76,10 +66,6 @@ export default {
 		NcButton,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	props: {
 		disabled: {
 			type: Boolean,
@@ -127,10 +113,6 @@ export default {
 			return `${minutes}:${seconds}`
 		},
 
-		tooltipDelay() {
-			return { show: 500, hide: 200 }
-		},
-
 		startRecordingTooltip() {
 			return t('spreed', 'Record voice message')
 		},
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 42c1d7dc8ab..a87ce0e204f 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -7,13 +7,7 @@
 	<div>
 		<NcButton v-if="showStartCallButton"
 			id="call_button"
-			v-tooltip="{
-				placement: 'auto',
-				trigger: 'hover',
-				content: startCallToolTip,
-				autoHide: false,
-				html: true
-			}"
+			:title="startCallTitle"
 			:aria-label="startCallLabel"
 			:disabled="startCallButtonDisabled || loading"
 			:type="startCallButtonType"
@@ -103,7 +97,6 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { useIsInCall } from '../../composables/useIsInCall.js'
 import { ATTENDEE, CALL, CONVERSATION, PARTICIPANT } from '../../constants.js'
@@ -119,10 +112,6 @@ import { blockCalls, unsupportedWarning } from '../../utils/browserCheck.js'
 export default {
 	name: 'CallButton',
 
-	directives: {
-		Tooltip,
-	},
-
 	components: {
 		NcActions,
 		NcActionButton,
@@ -284,7 +273,7 @@ export default {
 			return t('spreed', 'End call')
 		},
 
-		startCallToolTip() {
+		startCallTitle() {
 			if (this.isNextcloudTalkHashDirty) {
 				return t('spreed', 'Nextcloud Talk was updated, you need to reload the page before you can start or join a call.')
 			}
@@ -293,8 +282,8 @@ export default {
 				return t('spreed', 'This call has just ended')
 			}
 
-			if (this.callButtonTooltipText) {
-				return this.callButtonTooltipText
+			if (blockCalls) {
+				return unsupportedWarning
 			}
 
 			if (!this.conversation.canStartCall && !this.hasCall) {
@@ -340,16 +329,6 @@ export default {
 			return this.conversation.objectType === CONVERSATION.OBJECT_TYPE.PHONE
 		},
 
-		callButtonTooltipText() {
-			if (blockCalls) {
-				return unsupportedWarning
-			} else {
-				// Passing a falsy value into the content of the tooltip
-				// is the only way to disable it conditionally.
-				return false
-			}
-		},
-
 		isInLobby() {
 			return this.$store.getters.isInLobby
 		},
diff --git a/src/components/TopBar/ReactionMenu.vue b/src/components/TopBar/ReactionMenu.vue
index e37a1bc603c..50f9b09a9e7 100644
--- a/src/components/TopBar/ReactionMenu.vue
+++ b/src/components/TopBar/ReactionMenu.vue
@@ -4,8 +4,8 @@
 -->
 
 <template>
-	<NcActions v-tooltip="t('spreed', 'Send a reaction')"
-		type="tertiary"
+	<NcActions type="tertiary"
+		:title="t('spreed', 'Send a reaction')"
 		:aria-label="t('spreed', 'Send a reaction')"
 		class="reaction">
 		<template #icon>
@@ -36,7 +36,6 @@ import { t } from '@nextcloud/l10n'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionButtonGroup from '@nextcloud/vue/dist/Components/NcActionButtonGroup.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 export default {
 	name: 'ReactionMenu',
@@ -48,10 +47,6 @@ export default {
 		EmoticonOutline,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	props: {
 		/**
 		 * The conversation token
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 462b1acbc6f..e2c6276de96 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -129,7 +129,6 @@ import moment from '@nextcloud/moment'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
 import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 import richEditor from '@nextcloud/vue/dist/Mixins/richEditor.js'
 
 import CallButton from './CallButton.vue'
@@ -152,10 +151,6 @@ import { localCallParticipantModel, localMediaModel } from '../../utils/webrtc/i
 export default {
 	name: 'TopBar',
 
-	directives: {
-		Tooltip,
-	},
-
 	components: {
 		// Components
 		BreakoutRoomsEditor,
diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
index bb6dbc20ee6..fdf1e2490a9 100644
--- a/src/components/TopBar/TopBarMediaControls.vue
+++ b/src/components/TopBar/TopBarMediaControls.vue
@@ -53,7 +53,7 @@
 			type="tertiary" />
 
 		<NcButton v-if="isVirtualBackgroundAvailable && isSidebar"
-			v-tooltip="toggleVirtualBackgroundButtonLabel"
+			:title="toggleVirtualBackgroundButtonLabel"
 			type="tertiary"
 			:aria-label="toggleVirtualBackgroundButtonLabel"
 			:class="blurButtonClass"
@@ -66,7 +66,7 @@
 
 		<NcActions v-if="!isSidebar && isScreensharing"
 			id="screensharing-button"
-			v-tooltip="screenSharingButtonTooltip"
+			:title="screenSharingButtonTitle"
 			type="error"
 			:aria-label="screenSharingButtonAriaLabel"
 			:class="screenSharingButtonClass"
@@ -92,7 +92,7 @@
 			</NcActionButton>
 		</NcActions>
 		<NcButton v-else-if="!isSidebar"
-			v-tooltip="screenSharingButtonTooltip"
+			:title="screenSharingButtonTitle"
 			type="tertiary"
 			:aria-label="screenSharingButtonAriaLabel"
 			:disabled="!isScreensharingAllowed"
@@ -122,7 +122,6 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import LocalAudioControlButton from '../CallView/shared/LocalAudioControlButton.vue'
 import LocalVideoControlButton from '../CallView/shared/LocalVideoControlButton.vue'
@@ -137,9 +136,6 @@ export default {
 
 	name: 'TopBarMediaControls',
 
-	directives: {
-		Tooltip,
-	},
 	components: {
 		LocalAudioControlButton,
 		LocalVideoControlButton,
@@ -232,7 +228,7 @@ export default {
 			return this.model.attributes.localScreen
 		},
 
-		screenSharingButtonTooltip() {
+		screenSharingButtonTitle() {
 			if (!this.isScreensharingAllowed) {
 				return t('spreed', 'You are not allowed to enable screensharing')
 			}
diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue
index ceaf587c0c0..00ffb942e3f 100644
--- a/src/components/TopBar/TopBarMenu.vue
+++ b/src/components/TopBar/TopBarMenu.vue
@@ -6,7 +6,7 @@
 <template>
 	<div class="top-bar-menu">
 		<TransitionExpand v-if="isInCall" :show="isHandRaised" direction="horizontal">
-			<NcButton v-tooltip="raiseHandButtonLabel"
+			<NcButton :title="raiseHandButtonLabel"
 				:aria-label="raiseHandButtonLabel"
 				type="tertiary"
 				@click.stop="toggleHandRaised">
@@ -19,7 +19,7 @@
 		</TransitionExpand>
 
 		<NcActions v-if="!isSidebar"
-			v-tooltip="t('spreed', 'Conversation actions')"
+			:title="t('spreed', 'Conversation actions')"
 			:aria-label="t('spreed', 'Conversation actions')"
 			type="tertiary">
 			<!-- Menu icon: white if in call -->
@@ -169,7 +169,6 @@ import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import TransitionExpand from '../MediaSettings/TransitionExpand.vue'
 
@@ -215,10 +214,6 @@ export default {
 		VideoIcon,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	props: {
 		/**
 		 * The conversation token
diff --git a/src/components/UIShared/EditableTextField.vue b/src/components/UIShared/EditableTextField.vue
index d61cf55970d..842928c11f9 100644
--- a/src/components/UIShared/EditableTextField.vue
+++ b/src/components/UIShared/EditableTextField.vue
@@ -40,10 +40,10 @@
 					</template>
 				</NcButton>
 				<div v-if="showCountDown"
-					v-tooltip.auto="countDownWarningText"
 					class="counter"
 					tabindex="0"
-					aria-label="countDownWarningText">
+					:title="countDownWarningText"
+					:aria-label="countDownWarningText">
 					<span>{{ charactersCountDown }}</span>
 				</div>
 			</template>
@@ -71,7 +71,6 @@ import { t } from '@nextcloud/l10n'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcRichContenteditable from '@nextcloud/vue/dist/Components/NcRichContenteditable.js'
 import NcRichText from '@nextcloud/vue/dist/Components/NcRichText.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { parseSpecialSymbols } from '../../utils/textParse.ts'
 
@@ -86,10 +85,6 @@ export default {
 		Pencil,
 	},
 
-	directives: {
-		Tooltip,
-	},
-
 	props: {
 		/**
 		 * The "outer" value of the text, coming from the store. Every time this changes,

From 75e13a77ef51bc45c760eb972286cd5b3594ab9f Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Tue, 1 Oct 2024 09:42:43 +0200
Subject: [PATCH 2/2] fix: rename *Tooltip to *Title

- get rid of object fields reassigning in TopBarMediaControls

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/components/CallView/Grid/Grid.vue         |  5 +-
 .../CallView/shared/VideoBottomBar.vue        | 12 +--
 .../MessagesGroup/Message/Message.vue         |  4 +-
 .../MessageButtonsBar.spec.js                 |  4 +-
 .../MessageButtonsBar/MessageButtonsBar.vue   |  8 +-
 .../Message/MessagePart/MessageBody.vue       | 22 ++---
 .../NewMessage/NewMessageAudioRecorder.vue    | 18 ++--
 src/components/TopBar/TopBarMediaControls.vue | 83 +++++++++++--------
 8 files changed, 87 insertions(+), 69 deletions(-)

diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 9c9c39f17a9..628e669709c 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -8,7 +8,8 @@
 		<NcButton v-if="isStripe && !isRecording"
 			class="stripe--collapse"
 			type="tertiary-no-background"
-			:aria-label="stripeButtonTooltip"
+			:title="stripeButtonTitle"
+			:aria-label="stripeButtonTitle"
 			@click="handleClickStripeCollapse">
 			<template #icon>
 				<ChevronDown v-if="stripeOpen"
@@ -278,7 +279,7 @@ export default {
 	},
 
 	computed: {
-		stripeButtonTooltip() {
+		stripeButtonTitle() {
 			if (this.stripeOpen) {
 				return t('spreed', 'Collapse stripe')
 			} else {
diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
index ff438aceacb..64c59722dcc 100644
--- a/src/components/CallView/shared/VideoBottomBar.vue
+++ b/src/components/CallView/shared/VideoBottomBar.vue
@@ -33,8 +33,8 @@
 				group>
 				<NcButton v-if="showAudioIndicator"
 					key="audioIndicator"
-					:title="audioButtonTooltip"
-					:aria-label="audioButtonTooltip"
+					:title="audioButtonTitle"
+					:aria-label="audioButtonTitle"
 					class="audioIndicator"
 					type="tertiary-no-background"
 					:disabled="isAudioButtonDisabled"
@@ -47,8 +47,8 @@
 
 				<NcButton v-if="showVideoIndicator"
 					key="videoIndicator"
-					:title="videoButtonTooltip"
-					:aria-label="videoButtonTooltip"
+					:title="videoButtonTitle"
+					:aria-label="videoButtonTitle"
 					class="videoIndicator"
 					type="tertiary-no-background"
 					@click.stop="toggleVideo">
@@ -205,7 +205,7 @@ export default {
 		isAudioButtonDisabled() {
 			return !this.model.attributes.audioAvailable || !this.canFullModerate
 		},
-		audioButtonTooltip() {
+		audioButtonTitle() {
 			return this.model.attributes.audioAvailable
 				? t('spreed', 'Mute')
 				: t('spreed', 'Muted')
@@ -221,7 +221,7 @@ export default {
 		isRemoteVideoBlocked() {
 			return this.sharedData.remoteVideoBlocker && !this.sharedData.remoteVideoBlocker.isVideoEnabled()
 		},
-		videoButtonTooltip() {
+		videoButtonTitle() {
 			return this.isRemoteVideoEnabled
 				? t('spreed', 'Disable video')
 				: t('spreed', 'Enable video')
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 13a2c2a3e2b..4f3bb71d20c 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -330,9 +330,9 @@ export default {
 		readInfo() {
 			return {
 				showCommonReadIcon: this.showCommonReadIcon,
-				commonReadIconTooltip: t('spreed', 'Message read by everyone who shares their reading status'),
+				commonReadIconTitle: t('spreed', 'Message read by everyone who shares their reading status'),
 				showSentIcon: this.showSentIcon,
-				sentIconTooltip: t('spreed', 'Message sent'),
+				sentIconTitle: t('spreed', 'Message sent'),
 			}
 		},
 
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
index 5119c12c838..94fabac0331 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js
@@ -81,8 +81,8 @@ describe('MessageButtonsBar.vue', () => {
 			readInfo: {
 				showCommonReadIcon: true,
 				showSentIcon: true,
-				commonReadIconTooltip: '',
-				sentIconTooltip: '',
+				commonReadIconTitle: '',
+				sentIconTitle: '',
 			},
 			isTranslationAvailable: false,
 		}
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index 1e11bb24ae1..ea5e7f050dc 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -35,13 +35,13 @@
 					<NcActionText>
 						<template #icon>
 							<span v-if="readInfo.showCommonReadIcon"
-								:title="readInfo.commonReadIconTooltip"
-								:aria-label="readInfo.commonReadIconTooltip">
+								:title="readInfo.commonReadIconTitle"
+								:aria-label="readInfo.commonReadIconTitle">
 								<CheckAll :size="16" />
 							</span>
 							<span v-else-if="readInfo.showSentIcon"
-								:title="readInfo.sentIconTooltip"
-								:aria-label="readInfo.sentIconTooltip">
+								:title="readInfo.sentIconTitle"
+								:aria-label="readInfo.sentIconTitle">
 								<Check :size="16" />
 							</span>
 							<ClockOutline v-else :size="16" />
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
index 3d627dde54d..574c6471c72 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -73,10 +73,10 @@
 
 			<!-- Message delivery status indicators -->
 			<div v-if="message.sendingFailure"
-				:title="sendingErrorIconTooltip"
+				:title="sendingErrorIconTitle"
 				class="message-status sending-failed"
 				:class="{'retry-option': sendingErrorCanRetry}"
-				:aria-label="sendingErrorIconTooltip"
+				:aria-label="sendingErrorIconTitle"
 				tabindex="0"
 				@mouseover="showReloadButton = true"
 				@focus="showReloadButton = true"
@@ -84,7 +84,7 @@
 				@blur="showReloadButton = false">
 				<NcButton v-if="sendingErrorCanRetry && showReloadButton"
 					size="small"
-					:aria-label="sendingErrorIconTooltip"
+					:aria-label="sendingErrorIconTitle"
 					@click="handleRetry">
 					<template #icon>
 						<ReloadIcon :size="16" />
@@ -93,19 +93,19 @@
 				<AlertCircleIcon v-else :size="16" />
 			</div>
 			<div v-else-if="showLoadingIcon"
-				:title="loadingIconTooltip"
+				:title="loadingIconTitle"
 				class="icon-loading-small message-status"
-				:aria-label="loadingIconTooltip" />
+				:aria-label="loadingIconTitle" />
 			<div v-else-if="readInfo.showCommonReadIcon"
-				:title="readInfo.commonReadIconTooltip"
+				:title="readInfo.commonReadIconTitle"
 				class="message-status"
-				:aria-label="readInfo.commonReadIconTooltip">
+				:aria-label="readInfo.commonReadIconTitle">
 				<CheckAllIcon :size="16" />
 			</div>
 			<div v-else-if="readInfo.showSentIcon"
-				:title="readInfo.sentIconTooltip"
+				:title="readInfo.sentIconTitle"
 				class="message-status"
-				:aria-label="readInfo.sentIconTooltip">
+				:aria-label="readInfo.sentIconTitle">
 				<CheckIcon :size="16" />
 			</div>
 		</div>
@@ -289,7 +289,7 @@ export default {
 			return this.isTemporary || this.isDeleting || this.isEditing
 		},
 
-		loadingIconTooltip() {
+		loadingIconTitle() {
 			return t('spreed', 'Sending message')
 		},
 
@@ -297,7 +297,7 @@ export default {
 			return ['timeout', 'other', 'failed-upload'].includes(this.message.sendingFailure)
 		},
 
-		sendingErrorIconTooltip() {
+		sendingErrorIconTitle() {
 			if (this.sendingErrorCanRetry) {
 				return t('spreed', 'Failed to send the message. Click to try again')
 			}
diff --git a/src/components/NewMessage/NewMessageAudioRecorder.vue b/src/components/NewMessage/NewMessageAudioRecorder.vue
index 35435f0159e..13a87cf1a04 100644
--- a/src/components/NewMessage/NewMessageAudioRecorder.vue
+++ b/src/components/NewMessage/NewMessageAudioRecorder.vue
@@ -6,8 +6,8 @@
 <template>
 	<div class="audio-recorder">
 		<NcButton v-if="!isRecording"
-			:title="startRecordingTooltip"
-			:aria-label="startRecordingTooltip"
+			:title="startRecordingTitle"
+			:aria-label="startRecordingTitle"
 			type="tertiary"
 			:disabled="!canStartRecording"
 			@click="start">
@@ -17,8 +17,8 @@
 		</NcButton>
 		<div v-else class="wrapper">
 			<NcButton type="error"
-				:title="abortRecordingTooltip"
-				:aria-label="abortRecordingTooltip"
+				:title="abortRecordingTitle"
+				:aria-label="abortRecordingTitle"
 				@click="abortRecording">
 				<template #icon>
 					<Close :size="16" />
@@ -30,8 +30,8 @@
 					{{ parsedRecordTime }}</span>
 			</div>
 			<NcButton type="success"
-				:title="stopRecordingTooltip"
-				:aria-label="stopRecordingTooltip"
+				:title="stopRecordingTitle"
+				:aria-label="stopRecordingTitle"
 				:class="{'audio-recorder__trigger--recording': isRecording}"
 				@click="stop">
 				<template #icon>
@@ -113,15 +113,15 @@ export default {
 			return `${minutes}:${seconds}`
 		},
 
-		startRecordingTooltip() {
+		startRecordingTitle() {
 			return t('spreed', 'Record voice message')
 		},
 
-		stopRecordingTooltip() {
+		stopRecordingTitle() {
 			return t('spreed', 'End recording and send')
 		},
 
-		abortRecordingTooltip() {
+		abortRecordingTitle() {
 			return t('spreed', 'Dismiss recording')
 		},
 
diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
index fdf1e2490a9..f7d812a9e82 100644
--- a/src/components/TopBar/TopBarMediaControls.vue
+++ b/src/components/TopBar/TopBarMediaControls.vue
@@ -320,50 +320,67 @@ export default {
 
 			const virtualBackgroundEnabled = this.isVirtualBackgroundAvailable && this.model.attributes.virtualBackgroundEnabled
 
-			const tooltip = {}
 			if (!this.model.attributes.audioEnabled && this.model.attributes.videoEnabled && virtualBackgroundEnabled && this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen. To improve the situation try to disable the background blur or your video while doing a screen share.')
-				tooltip.actionLabel = t('spreed', 'Disable background blur')
-				tooltip.action = 'disableVirtualBackground'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen. To improve the situation try to disable the background blur or your video while doing a screen share.'),
+					actionLabel: t('spreed', 'Disable background blur'),
+					action: 'disableVirtualBackground',
+				}
 			} else if (!this.model.attributes.audioEnabled && this.model.attributes.videoEnabled && this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen. To improve the situation try to disable your video while doing a screenshare.')
-				tooltip.actionLabel = t('spreed', 'Disable video')
-				tooltip.action = 'disableVideo'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen. To improve the situation try to disable your video while doing a screenshare.'),
+					actionLabel: t('spreed', 'Disable video'),
+					action: 'disableVideo',
+				}
 			} else if (!this.model.attributes.audioEnabled && this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen.')
-				tooltip.actionLabel = ''
-				tooltip.action = ''
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see your screen.'),
+					actionLabel: '',
+					action: '',
+				}
 			} else if (!this.model.attributes.audioEnabled && this.model.attributes.videoEnabled) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you.')
-				tooltip.actionLabel = ''
-				tooltip.action = ''
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to see you.'),
+					actionLabel: '',
+					action: '',
+				}
 			} else if (this.model.attributes.videoEnabled && virtualBackgroundEnabled && this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable the background blur or your video while doing a screenshare.')
-				tooltip.actionLabel = t('spreed', 'Disable background blur')
-				tooltip.action = 'disableVirtualBackground'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable the background blur or your video while doing a screenshare.'),
+					actionLabel: t('spreed', 'Disable background blur'),
+					action: 'disableVirtualBackground',
+				}
 			} else if (this.model.attributes.videoEnabled && this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video while doing a screenshare.')
-				tooltip.actionLabel = t('spreed', 'Disable video')
-				tooltip.action = 'disableVideo'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video while doing a screenshare.'),
+					actionLabel: t('spreed', 'Disable video'),
+					action: 'disableVideo',
+				}
 			} else if (this.model.attributes.localScreen) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you and see your screen. To improve the situation try to disable your screenshare.')
-				tooltip.actionLabel = t('spreed', 'Disable screenshare')
-				tooltip.action = 'disableScreenShare'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you and see your screen. To improve the situation try to disable your screenshare.'),
+					actionLabel: t('spreed', 'Disable screenshare'),
+					action: 'disableScreenShare',
+				}
 			} else if (this.model.attributes.videoEnabled && virtualBackgroundEnabled) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable the background blur or your video.')
-				tooltip.actionLabel = t('spreed', 'Disable background blur')
-				tooltip.action = 'disableVirtualBackground'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable the background blur or your video.'),
+					actionLabel: t('spreed', 'Disable background blur'),
+					action: 'disableVirtualBackground',
+				}
 			} else if (this.model.attributes.videoEnabled) {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video.')
-				tooltip.actionLabel = t('spreed', 'Disable video')
-				tooltip.action = 'disableVideo'
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand and see you. To improve the situation try to disable your video.'),
+					actionLabel: t('spreed', 'Disable video'),
+					action: 'disableVideo',
+				}
 			} else {
-				tooltip.content = t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you.')
-				tooltip.actionLabel = ''
-				tooltip.action = ''
+				return {
+					content: t('spreed', 'Your internet connection or computer are busy and other participants might be unable to understand you.'),
+					actionLabel: '',
+					action: '',
+				}
 			}
-
-			return tooltip
 		},
 	},