Replace custom tooltips with native tooltips in personal and administration settings

apps/federatedfilesharing/src/components/PersonalSettings.vue

@@ -24,7 +24,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 			{{ t('federatedfilesharing', 'Your Federated Cloud ID:') }}
 			<strong id="cloudid">{{ cloudId }}</strong>
 			<NcButton ref="clipboard"
-				v-tooltip="copyLinkTooltip"
+				:title="copyLinkTooltip"
+				:aria-label="copyLinkTooltip"
 				class="clipboard"
 				type="tertiary-no-background"
 				@click.prevent="copyCloudId">
@@ -94,7 +95,6 @@ import Twitter from 'vue-material-design-icons/Twitter'
 import Facebook from 'vue-material-design-icons/Facebook'
 import Web from 'vue-material-design-icons/Web'
 import Clipboard from 'vue-material-design-icons/Clipboard'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 
 export default {
 	name: 'PersonalSettings',
@@ -106,9 +106,6 @@ export default {
 		Web,
 		Clipboard,
 	},
-	directives: {
-		Tooltip,
-	},
 	data() {
 		return {
 			color: loadState('federatedfilesharing', 'color'),

apps/settings/src/components/AppDetails.vue

@@ -72,14 +72,16 @@
 					:disabled="installing || isLoading"
 					@click="disable(app.id)">
 				<input v-if="!app.active && (app.canInstall || app.isCompatible)"
-					v-tooltip.auto="enableButtonTooltip"
+					:title="enableButtonTooltip"
+					:aria-label="enableButtonTooltip"
 					class="enable primary"
 					type="button"
 					:value="enableButtonText"
 					:disabled="!app.canInstall || installing || isLoading"
 					@click="enable(app.id)">
 				<input v-else-if="!app.active && !app.canInstall"
-					v-tooltip.auto="forceEnableButtonTooltip"
+					:title="forceEnableButtonTooltip"
+					:aria-label="forceEnableButtonTooltip"
 					class="enable force"
 					type="button"
 					:value="forceEnableButtonText"

apps/settings/src/components/AuthToken.vue

@@ -37,14 +37,12 @@
 			<span v-if="wiping" class="wiping-warning">({{ t('settings', 'Marked for remote wipe') }})</span>
 		</td>
 		<td>
-			<span v-tooltip="lastActivity" class="last-activity">{{ lastActivityRelative }}</span>
+			<span :title="lastActivity" class="last-activity">{{ lastActivityRelative }}</span>
 		</td>
 		<td class="more">
 			<NcActions v-if="!token.current"
-				v-tooltip.auto="{
-					content: t('settings', 'Device settings'),
-					container: 'body'
-				}"
+				:title="t('settings', 'Device settings')"
+				:aria-label="t('settings', 'Device settings')"
 				:open.sync="actionOpen">
 				<NcActionCheckbox v-if="token.type === 1"
 					:checked="token.scope.filesystem"

apps/settings/src/components/AuthTokenSetupDialogue.vue

@@ -55,8 +55,10 @@
 				class="monospaced"
 				readonly="readonly"
 				@focus="selectInput">
+
 			<a ref="clipboardButton"
-				v-tooltip="copyTooltipOptions"
+				:title="copyTooltipOptions"
+				:aria-label="copyTooltipOptions"
 				v-clipboard:copy="appPassword"
 				v-clipboard:success="onCopyPassword"
 				v-clipboard:error="onCopyPasswordFailed"
@@ -113,24 +115,10 @@ export default {
 	},
 	computed: {
 		copyTooltipOptions() {
-			const base = {
-				hideOnTargetClick: false,
-				trigger: 'manual',
-			}
-
 			if (this.passwordCopied) {
-				return {
-					...base,
-					content: t('settings', 'Copied!'),
-					show: true,
-				}
-			} else {
-				return {
-					...base,
-					content: t('settings', 'Copy'),
-					show: this.hoveringCopyButton,
-				}
+				return t('settings', 'Copied!')
 			}
+			return t('settings', 'Copy')
 		},
 	},
 	methods: {

apps/settings/src/components/PersonalInfo/shared/FederationControl.vue

@@ -34,7 +34,8 @@
 			:is-supported-scope="supportedScopes.includes(federationScope.name)"
 			:name="federationScope.name"
 			:tooltip-disabled="federationScope.tooltipDisabled"
-			:tooltip="federationScope.tooltip" />
+			:tooltip="federationScope.tooltip"
+			:aria-label="federationScope.tooltip" />
 	</NcActions>
 </template>
 

apps/settings/src/components/PersonalInfo/shared/FederationControlAction.vue

@@ -27,9 +27,8 @@
 		:close-after-click="true"
 		:disabled="!isSupportedScope"
 		:icon="iconClass"
-		:title="displayName"
+		:title="isSupportedScope ? tooltip : tooltipDisabled"
 		@click.stop.prevent="updateScope">
-		{{ isSupportedScope ? tooltip : tooltipDisabled }}
 	</NcActionButton>
 </template>
 

apps/theming/src/components/BackgroundSettings.vue

@@ -63,7 +63,8 @@
 		<!-- Background set selection -->
 		<button v-for="shippedBackground in shippedBackgrounds"
 			:key="shippedBackground.name"
-			v-tooltip="shippedBackground.details.attribution"
+			:title="shippedBackground.details.attribution"
+			:aria-label="shippedBackground.details.attribution"
 			:class="{ 'icon-loading': loading === shippedBackground.name, 'background--active': backgroundImage === shippedBackground.name }"
 			:data-color-bright="shippedBackground.details.theming === 'dark'"
 			:data-user-theming-background-shipped="shippedBackground.name"
@@ -93,7 +94,6 @@ import Check from 'vue-material-design-icons/Check.vue'
 import Close from 'vue-material-design-icons/Close.vue'
 import debounce from 'debounce'
 import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import Vibrant from 'node-vibrant'
 import { Palette } from 'node-vibrant/lib/color'
 import { getFilePickerBuilder } from '@nextcloud/dialogs'
@@ -114,9 +114,6 @@ const picker = getFilePickerBuilder(t('theming', 'Select a background from your
 
 export default {
 	name: 'BackgroundSettings',
-	directives: {
-		Tooltip,
-	},
 
 	components: {
 		Check,

apps/updatenotification/src/components/UpdateNotification.vue

@@ -71,7 +71,7 @@
 			</template>
 			<template v-else>
 				{{ t('updatenotification', 'Your version is up to date.') }}
-				<span v-tooltip.auto="lastCheckedOnString" class="icon-info svg" />
+				<span :title="lastCheckedOnString" :aria-label="lastCheckedOnString" class="icon-info svg" />
 			</template>
 
 			<template v-if="!isDefaultUpdateServerURL">
@@ -129,7 +129,6 @@ import NcPopoverMenu from '@nextcloud/vue/dist/Components/NcPopoverMenu.js'
 import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect.js'
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import { VTooltip } from 'v-tooltip'
 import ClickOutside from 'vue-click-outside'
 import axios from '@nextcloud/axios'
 import { loadState } from '@nextcloud/initial-state'
@@ -142,8 +141,6 @@ const logger = getLoggerBuilder()
 	.detectUser()
 	.build()
 
-VTooltip.options.defaultHtml = false
-
 export default {
 	name: 'UpdateNotification',
 	components: {
@@ -154,7 +151,6 @@ export default {
 	},
 	directives: {
 		ClickOutside,
-		tooltip: VTooltip,
 	},
 	data() {
 		return {