Merge pull request #36084 from nextcloud/backport/35893/stable25

[stable25] Replace custom tooltips with native ones in users page

Author: ChristophWurst

apps/settings/src/components/UserList/UserRow.vue

@@ -93,7 +93,7 @@
 		<div v-else class="name">
 			{{ user.id }}
 			<div class="displayName subtitle">
-				<div v-tooltip="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
+				<div :title="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
 					{{ user.displayname }}
 				</div>
 			</div>
@@ -172,7 +172,7 @@
 				<span slot="noResult">{{ t('settings', 'No results') }}</span>
 			</NcMultiselect>
 		</div>
-		<div v-tooltip.auto="usedSpace"
+		<div :title="usedSpace"
 			:class="{'icon-loading-small': loading.quota}"
 			class="quota">
 			<NcMultiselect :allow-empty="false"
@@ -214,9 +214,9 @@
 				class="toggleUserActions">
 				<NcActions>
 					<NcActionButton icon="icon-checkmark"
-						@click="editing = false">
-						{{ t('settings', 'Done') }}
-					</NcActionButton>
+						:title="t('settings', 'Done')"
+						:aria-label="t('settings', 'Done')"
+						@click="editing = false" />
 				</NcActions>
 				<div v-click-outside="hideMenu" class="userPopoverMenuWrapper">
 					<button class="icon-more"
@@ -237,8 +237,7 @@
 
 <script>
 import ClickOutside from 'vue-click-outside'
-import Vue from 'vue'
-import VTooltip from 'v-tooltip'
+
 import {
 	NcPopoverMenu,
 	NcMultiselect,
@@ -248,8 +247,6 @@ import {
 import UserRowSimple from './UserRowSimple'
 import UserRowMixin from '../../mixins/UserRowMixin'
 
-Vue.use(VTooltip)
-
 export default {
 	name: 'UserRow',
 	components: {

apps/settings/src/components/UserList/UserRowSimple.vue

@@ -13,14 +13,14 @@
 		<div class="name">
 			{{ user.id }}
 			<div class="displayName subtitle">
-				<div v-tooltip="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
+				<div :title="user.displayname.length > 20 ? user.displayname : ''" class="cellText">
 					{{ user.displayname }}
 				</div>
 			</div>
 		</div>
 		<div />
 		<div class="mailAddress">
-			<div v-tooltip="user.email !== null && user.email.length > 20 ? user.email : ''" class="cellText">
+			<div :title="user.email !== null && user.email.length > 20 ? user.email : ''" class="cellText">
 				{{ user.email }}
 			</div>
 		</div>
@@ -46,20 +46,21 @@
 			<div v-if="showConfig.showUserBackend" class="userBackend">
 				{{ user.backend }}
 			</div>
-			<div v-if="showConfig.showStoragePath" v-tooltip="user.storageLocation" class="storageLocation subtitle">
+			<div v-if="showConfig.showStoragePath" :title="user.storageLocation" class="storageLocation subtitle">
 				{{ user.storageLocation }}
 			</div>
 		</div>
-		<div v-if="showConfig.showLastLogin" v-tooltip.auto="userLastLoginTooltip" class="lastLogin">
+		<div v-if="showConfig.showLastLogin" :title="userLastLoginTooltip" class="lastLogin">
 			{{ userLastLogin }}
 		</div>
 
 		<div class="userActions">
 			<div v-if="canEdit && !loading.all" class="toggleUserActions">
 				<NcActions>
-					<NcActionButton icon="icon-rename" @click="toggleEdit">
-						{{ t('settings', 'Edit User') }}
-					</NcActionButton>
+					<NcActionButton icon="icon-rename"
+						:title="t('settings', 'Edit User')"
+						:aria-label="t('settings', 'Edit User')"
+						@click="toggleEdit" />
 				</NcActions>
 				<div class="userPopoverMenuWrapper">
 					<button v-click-outside="hideMenu"