Merge pull request #6765 from nextcloud-libraries/backport/6761/stable8

[stable8] refactor: deprecate `Tooltip` directive for accessibility

Author: susnux

CHANGELOG.md

@@ -23,6 +23,17 @@ For this we deprecated the `range` property in favor of three new types for the
 Also the `formatter` property is deprecated, instead you can now provide a function to the `format` property,
 which will receive a `Date` object and should return the formatted date as a string.
 
+#### `Tooltip` directive
+The `Tooltip` directive has been deprecated and will be removed in the future.
+In most cases you want to use the native browser tooltips instead by using the native HTML `title` attribute.
+In some rare cases where you really need a formatted tooltip `NcPopover` could be used.
+
+```diff
+ <NcButton
+-    v-tooltip="title"
++    :title="title"
+```
+
 ## [v8.24.0](https://github.com/nextcloud-libraries/nextcloud-vue/tree/v8.24.0) (2025-04-02)
 [Full Changelog](https://github.com/nextcloud-libraries/nextcloud-vue/compare/v8.23.1...v8.24.0)
 

src/components/NcAppContent/NcAppDetailsToggle.vue

@@ -4,10 +4,10 @@
 -->
 
 <template>
-	<NcButton v-tooltip="title"
+	<NcButton :aria-label="title"
 		class="app-details-toggle"
 		:class="{ 'app-details-toggle--mobile': isMobile }"
-		:aria-label="title"
+		:title="title"
 		variant="tertiary">
 		<template #icon>
 			<ArrowLeft v-if="isRtl" :size="20" />
@@ -17,29 +17,22 @@
 </template>
 
 <script>
-import NcButton from '../NcButton/index.js'
-import { t } from '../../l10n.js'
-import Tooltip from '../../directives/Tooltip/index.js'
-
 import { emit } from '@nextcloud/event-bus'
+import { useIsMobile } from '../../composables/useIsMobile/index.js'
+import { isRtl } from '../../utils/rtl.ts'
+import { t } from '../../l10n.js'
 
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
-
-import { useIsMobile } from '../../composables/useIsMobile/index.js'
-import { isRtl } from '../../utils/rtl.ts'
+import NcButton from '../NcButton/index.js'
 
 export default {
 	name: 'NcAppDetailsToggle',
 
-	directives: {
-		tooltip: Tooltip,
-	},
-
 	components: {
-		NcButton,
 		ArrowRight,
 		ArrowLeft,
+		NcButton,
 	},
 	setup() {
 		return {

src/components/NcModal/NcModal.vue

@@ -220,9 +220,9 @@ export default {
 					<div class="icons-menu">
 						<!-- Play-pause toggle -->
 						<button v-if="hasNext && enableSlideshow"
-							v-tooltip.auto="playPauseName"
 							:class="{ 'play-pause-icons--paused': slideshowPaused }"
 							class="play-pause-icons"
+							:title="playPauseName"
 							type="button"
 							@click="togglePlayPause">
 							<!-- Play/pause icons -->
@@ -340,7 +340,6 @@ import GenRandomId from '../../utils/GenRandomId.js'
 import NcActions from '../NcActions/index.js'
 import NcButton from '../../components/NcButton/index.js'
 import Timer from '../../utils/Timer.js'
-import Tooltip from '../../directives/Tooltip/index.js'
 
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
@@ -352,19 +351,15 @@ export default {
 	name: 'NcModal',
 
 	components: {
-		NcActions,
 		ChevronLeft,
 		ChevronRight,
 		Close,
 		Pause,
 		Play,
+		NcActions,
 		NcButton,
 	},
 
-	directives: {
-		tooltip: Tooltip,
-	},
-
 	props: {
 		/**
 		 * Name to be shown with the modal

src/components/NcRichContenteditable/NcRichContenteditable.vue

@@ -242,7 +242,6 @@ export default {
 	<div class="rich-contenteditable">
 		<div :id="id"
 			ref="contenteditable"
-			v-tooltip="tooltipString"
 			:class="{
 				'rich-contenteditable__input--empty': isEmptyValue,
 				'rich-contenteditable__input--multiline': multiline,
@@ -261,6 +260,7 @@ export default {
 			:aria-controls="tributeId"
 			:aria-expanded="isAutocompleteOpen ? 'true' : 'false'"
 			:aria-activedescendant="autocompleteActiveId"
+			:title="tooltipString"
 			v-bind="$attrs"
 			v-on="listeners"
 			@focus="moveCursorToEnd"
@@ -288,7 +288,6 @@ export default {
 import { t } from '../../l10n.js'
 import NcAutoCompleteResult from './NcAutoCompleteResult.vue'
 import richEditor from '../../mixins/richEditor/index.js'
-import Tooltip from '../../directives/Tooltip/index.js'
 import { emojiSearch, emojiAddRecent } from '../../functions/emoji/index.ts'
 import { searchProvider, getLinkWithPicker } from '../NcRichText/index.js'
 
@@ -312,10 +311,6 @@ smilesCharacters.forEach((char) => {
 export default {
 	name: 'NcRichContenteditable',
 
-	directives: {
-		tooltip: Tooltip,
-	},
-
 	mixins: [richEditor],
 
 	inheritAttrs: false,

src/directives/Tooltip/index.js

@@ -11,5 +11,10 @@ options.themes.tooltip.delay = { show: 500, hide: 200 }
 options.themes.tooltip.distance = 10
 options.themes.tooltip['arrow-padding'] = 3
 
-export default VTooltip
-export { options }
+export {
+	/**
+	 * @deprecated Use the native `title` attribute instead.
+	 */
+	VTooltip as default,
+	options,
+}