Merge pull request #3569 from nextcloud/enh/3550-Adapt_several_NC_Vue_components_for_work_with_custom_tooltips

Add title prop to components for native tooltips

Author: JuliaKirschenheuter

src/components/NcActionLink/NcActionLink.vue

@@ -53,6 +53,7 @@ export default {
 			:href="href"
 			:aria-label="ariaLabel"
 			:target="target"
+			:title="title"
 			class="action-link focusable"
 			rel="nofollow noreferrer noopener"
 			@click="onClick">
@@ -133,6 +134,13 @@ export default {
 				return ['_blank', '_self', '_parent', '_top'].indexOf(value) > -1
 			},
 		},
+		/**
+		 * Declares a native tooltip when not null
+		 */
+		title: {
+			type: String,
+			default: null,
+		},
 	},
 }
 </script>

src/components/NcActions/NcActions.vue

@@ -939,6 +939,7 @@ export default {
 					],
 					attrs: {
 						'aria-label': action?.componentOptions?.propsData?.ariaLabel || action?.componentOptions?.children?.[0]?.text,
+						title: action?.componentOptions?.propsData?.title,
 					},
 					ref: action?.data?.ref,
 					props: {

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -195,7 +195,8 @@ include a standard-header like it's used by the files app.
 								<!-- main title -->
 								<h2 v-show="!titleEditable"
 									v-linkify="{text: title, linkify: linkifyTitle}"
-									v-tooltip.auto="titleTooltip"
+									:aria-label="titleTooltip"
+									:title="titleTooltip"
 									class="app-sidebar-header__maintitle"
 									:tabindex="titleEditable ? 0 : undefined"
 									@click.self="editTitle">
@@ -231,15 +232,16 @@ include a standard-header like it's used by the files app.
 							</div>
 							<!-- secondary title -->
 							<p v-if="subtitle.trim() !== ''"
-								v-tooltip.auto="subtitleTooltip"
+								:aria-label="subtitleTooltip"
+								:title="subtitleTooltip"
 								class="app-sidebar-header__subtitle">
 								{{ subtitle }}
 							</p>
 						</div>
 					</div>
 				</div>
 
-				<NcButton v-tooltip.auto="closeTranslated"
+				<NcButton :title="closeTranslated"
 					:aria-label="closeTranslated"
 					type="tertiary"
 					class="app-sidebar__close"

src/components/NcAvatar/NcAvatar.vue

@@ -115,6 +115,7 @@ export default {
 			'avatardiv--unknown': userDoesNotExist,
 			'avatardiv--with-menu': hasMenu
 		}"
+		:title="title"
 		:style="avatarStyle"
 		class="avatardiv popovermenu-wrapper"
 		:tabindex="hasMenu ? '0' : undefined"
@@ -325,6 +326,18 @@ export default {
 			type: String,
 			default: null,
 		},
+
+		/**
+		 * Declares a native tooltip when not null
+		 *
+		 * requires disableTooltip not to be set to true
+		 * requires tooltipMessage not to be provided
+		 */
+		title: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * Declares username is not a user's name, when true.
 		 * Prevents loading user's avatar from server and forces generating colored initials,
@@ -445,7 +458,7 @@ export default {
 			}
 		},
 		tooltip() {
-			if (this.disableTooltip) {
+			if (this.disableTooltip || this.title) {
 				return false
 			}
 			if (this.tooltipMessage) {