Merge pull request #13423 from nextcloud/fix/noid/reduce-tooltips-usage

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,

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.')
 			}

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 {

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() {

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')
 			}

src/components/CallView/shared/VideoBottomBar.vue

@@ -33,8 +33,8 @@
 				group>
 				<NcButton v-if="showAudioIndicator"
 					key="audioIndicator"
-					v-tooltip="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"
-					v-tooltip="videoButtonTooltip"
-					:aria-label="videoButtonTooltip"
+					:title="videoButtonTitle"
+					:aria-label="videoButtonTitle"
 					class="videoIndicator"
 					type="tertiary-no-background"
 					@click.stop="toggleVideo">
@@ -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: {
@@ -210,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')
@@ -226,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')

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(),

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')
 			}

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'),
 			}
 		},
 

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,
 		}