chore: Remove deprecated tooltips

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/Controls.vue

@@ -78,7 +78,7 @@
 						required
 						@focus="$store.dispatch('toggleShortcutLock', true)"
 						@blur="$store.dispatch('toggleShortcutLock', false)">
-					<input v-tooltip="t('deck', 'Add list')"
+					<input :title="t('deck', 'Add list')"
 						class="icon-confirm"
 						type="submit"
 						value="">
@@ -86,17 +86,16 @@
 			</div>
 			<div v-if="board" class="board-action-buttons">
 				<div class="board-action-buttons__filter">
-					<NcPopover container=".board-action-buttons__filter"
+					<NcPopover :placement="'bottom-end'"
-						:placement="'bottom-end'"
 						:aria-label="t('deck', 'Active filters')"
 						:name="t('deck', 'Active filters')"
-						:tooltip="t('deck', 'Active filters')"
 						@show="filterVisible=true"
 						@hide="filterVisible=false">
 						<!-- We cannot use NcActions here are the popover trigger does not update on reactive icons -->
-						<NcButton slot="trigger"
+						<template #trigger>
-							ref="filterPopover"
+							<NcButton ref="filterPopover"
-							:name="t('deck', 'Apply filter')"
+								:title="t('deck', 'Apply filter')"
+								:aria-label="t('deck', 'Apply filter')"
 								class="filter-button"
 								:type="isFilterActive ? 'primary' : 'tertiary'">
 								<template #icon>
@@ -104,6 +103,7 @@
 									<FilterOffIcon v-else :size="20" decorative />
 								</template>
 							</NcButton>
+						</template>
 
 						<div v-if="filterVisible" class="filter">
 							<h3>{{ t('deck', 'Filter by tag') }}</h3>
@@ -563,8 +563,4 @@ export default {
 	.popover:focus {
 		outline: 2px solid var(--color-main-text);
 	}
-
-	.tooltip-inner.popover-inner {
-		text-align: left;
-	}
 </style>

src/components/SessionList.vue

@@ -20,7 +20,7 @@
  * -->
 
 <template>
-	<div v-tooltip.bottom="t('text', 'Currently present people')"
+	<div :title="t('text', 'Currently present people')"
 		class="avatar-list">
 		<div v-for="session in sessionsVisible"
 			:key="session.uid"
@@ -37,16 +37,13 @@
 </template>
 
 <script>
-import { NcAvatar, Tooltip } from '@nextcloud/vue'
+import { NcAvatar } from '@nextcloud/vue'
 
 export default {
 	name: 'SessionList',
 	components: {
 		NcAvatar,
 	},
-	directives: {
-		tooltip: Tooltip,
-	},
 	props: {
 		sessions: {
 			type: Array,

src/components/board/Board.vue

@@ -52,7 +52,7 @@
 							class="no-close"
 							:placeholder="t('deck', 'List name')"
 							required>
-						<input v-tooltip="t('deck', 'Add list')"
+						<input title="t('deck', 'Add list')"
 							class="icon-confirm"
 							type="submit"
 							value="">

src/components/board/SharingTabSidebar.vue

@@ -24,7 +24,7 @@
 			class="shareWithList">
 			<li>
 				<NcAvatar :user="board.owner.uid" />
-				<span class="has-tooltip username">
+				<span class="username">
 					{{ board.owner.displayname }}
 					<span v-if="!isCurrentUser(board.owner.uid)" class="board-owner-label">
 						{{ t('deck', 'Board owner') }}
@@ -35,7 +35,7 @@
 				<NcAvatar v-if="acl.type===0" :user="acl.participant.uid" />
 				<div v-if="acl.type===1" class="avatardiv icon icon-group" />
 				<div v-if="acl.type===7" class="avatardiv icon icon-circles" />
-				<span class="has-tooltip username">
+				<span class="username">
 					{{ acl.participant.displayname }}
 					<span v-if="acl.type===1">{{ t('deck', '(Group)') }}</span>
 					<span v-if="acl.type===7">{{ t('deck', '(Team)') }}</span>

src/components/board/Stack.vue

@@ -32,7 +32,7 @@
 					{{ stack.title }}
 				</h3>
 				<h3 v-else-if="!editing"
-					v-tooltip="stack.title"
+					title="stack.title"
 					dir="auto"
 					tabindex="0"
 					:aria-label="stack.title"
@@ -51,7 +51,7 @@
 						dir="auto"
 						type="text"
 						required="required">
-					<input v-tooltip="t('deck', 'Edit list title')"
+					<input title="t('deck', 'Edit list title')"
 						class="icon-confirm"
 						type="submit"
 						value="">

src/components/board/TagsTabSidebar.vue

@@ -12,20 +12,21 @@
 							<div :style="{ backgroundColor: '#' + editingLabel.color }" class="color0 icon-colorpicker" />
 						</NcColorPicker>
 						<input v-model="editingLabel.title" type="text">
-						<input v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
+						<input :disabled="!editLabelObjValidated"
-							:disabled="!editLabelObjValidated"
 							type="submit"
 							value=""
 							class="icon-confirm">
 						<NcActions>
-							<NcActionButton v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }"
+							<NcActionButton :disabled="!editLabelObjValidated"
-								:disabled="!editLabelObjValidated"
 								icon="icon-close"
 								@click="editingLabelId = null">
 								{{ t('deck', 'Cancel') }}
 							</NcActionButton>
 						</NcActions>
 					</form>
+					<p v-if="!editLabelObjValidated">
+						{{ missingDataLabel }}
+					</p>
 				</template>
 				<template v-else>
 					<div v-if="canManage && !isArchived" class="label-title" @click="clickEdit(label)">
@@ -58,8 +59,7 @@
 						<div :style="{ backgroundColor: '#' + addLabelObj.color }" class="color0 icon-colorpicker" />
 					</NcColorPicker>
 					<input v-model="addLabelObj.title" type="text">
-					<input v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }"
+					<input :disabled="!addLabelObjValidated"
-						:disabled="!addLabelObjValidated"
 						type="submit"
 						value=""
 						class="icon-confirm">
@@ -69,6 +69,9 @@
 						</NcActionButton>
 					</NcActions>
 				</form>
+				<p v-if="!addLabelObjValidated">
+					{{ missingDataLabel }}
+				</p>
 			</li>
 			<button v-if="canManage && !isArchived" @click="clickShowAddLabel()">
 				<span class="icon-add" />{{ t('deck', 'Add a new tag') }}

src/components/boards/BoardItem.vue

@@ -39,7 +39,7 @@
 				:user="user.participant.uid"
 				:display-name="user.participant.displayname"
 				class="board-list-avatar" />
-			<div v-if="board.acl.length > 5" v-tooltip="otherAcl" class="avatardiv popovermenu-wrapper board-list-avatar icon-more" />
+			<div v-if="board.acl.length > 5" :title="otherAcl" class="avatardiv popovermenu-wrapper board-list-avatar icon-more" />
 		</div>
 		<div class="board-list-actions-cell" />
 	</router-link>

src/components/card/CardSidebarTabComments.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div class="comment--header">
 			<NcAvatar :user="currentUser.uid" />
-			<span class="has-tooltip username">
+			<span class="username">
 				{{ currentUser.displayName }}
 			</span>
 		</div>

src/components/card/CommentForm.vue

@@ -49,7 +49,7 @@
 					@blur="error = null"
 					@input="validate()" />
 			</At>
-			<input v-tooltip="t('deck', 'Save')"
+			<input :title="t('deck', 'Save')"
 				class="icon-confirm"
 				type="submit"
 				value=""

src/components/card/CommentItem.vue

@@ -22,7 +22,7 @@
 	<li v-else class="comment">
 		<div class="comment--header">
 			<NcAvatar :user="comment.actorId" />
-			<span class="has-tooltip username">
+			<span class="username">
 				{{ comment.actorDisplayName }}
 			</span>
 			<NcActions v-show="!edit" :force-menu="true">

src/components/card/Description.vue

@@ -27,7 +27,7 @@
 			<span v-if="descriptionLastEdit && !descriptionSaving">{{ t('deck', '(Unsaved)') }}</span>
 			<span v-if="descriptionSaving">{{ t('deck', '(Saving…)') }}</span>
 			<a v-if="!textAppAvailable"
-				v-tooltip="t('deck', 'Formatting help')"
+				:title="t('deck', 'Formatting help')"
 				href="https://deck.readthedocs.io/en/latest/Markdown/"
 				target="_blank"
 				class="icon icon-info" />

src/components/cards/AvatarList.vue

@@ -85,7 +85,7 @@
 </template>
 
 <script>
-import { NcAvatar, NcPopover, Tooltip } from '@nextcloud/vue'
+import { NcAvatar, NcPopover } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 
@@ -96,9 +96,6 @@ export default {
 		NcPopover,
 		AccountMultiple,
 	},
-	directives: {
-		tooltip: Tooltip,
-	},
 	props: {
 		users: {
 			type: Array,

src/components/cards/CardBadges.vue

@@ -29,7 +29,7 @@
 				<CardId v-if="idBadge" class="icon-badge" :card="card" />
 
 				<div v-if="card.commentsCount > 0"
-					v-tooltip="commentsHint"
+					:title="commentsHint"
 					class="icon-badge"
 					@click.stop="openComments">
 					<CommentUnreadIcon v-if="card.commentsUnread > 0" :size="16" />

src/main.js

@@ -27,7 +27,6 @@ import { sync } from 'vuex-router-sync'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { showError } from '@nextcloud/dialogs'
 import { subscribe } from '@nextcloud/event-bus'
-import { Tooltip } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import './shared-init.js'
 import './models/index.js'
@@ -41,7 +40,6 @@ sync(store, router)
 Vue.prototype.t = translate
 Vue.prototype.n = translatePlural
 
-Vue.directive('tooltip', Tooltip)
 Vue.directive('click-outside', ClickOutside)
 
 Vue.directive('focus', {

src/views/CardReferenceWidget.vue

@@ -33,7 +33,7 @@
 			</strong>
 			<div v-if="dueDate" class="spacer" />
 			<span v-if="dueDate"
-				v-tooltip.top="{ content: formattedDueDate }"
+				:title="t('Due date') + ': ' + formattedDueDate"
 				class="due-date">
 				<CalendarBlankIcon :size="20"
 					class="icon" />
@@ -42,7 +42,7 @@
 		</div>
 		<div class="line">
 			<DeckIcon :size="20" class="title-icon" />
-			<a v-tooltip.top="{ content: stackTooltip }"
+			<a :title="stackTooltip"
 				:href="boardLink"
 				target="_blank"
 				class="link">
@@ -67,7 +67,7 @@
 					'description': true,
 					'short-description': shortDescription,
 				}">
-				<NcRichText v-tooltip.top="{ content: shortDescription ? t('deck', 'Click to expand description') : undefined }"
+				<NcRichText :title="shortDescription ? t('deck', 'Click to expand description') : undefined"
 					:text="card.description"
 					:use-markdown="true"
 					@click.native="shortDescription = !shortDescription" />

src/views/CommentReferenceWidget.vue

@@ -33,7 +33,7 @@
 			</strong>
 			<div v-if="dueDate" class="spacer" />
 			<span v-if="dueDate"
-				v-tooltip.top="{ content: formattedDueDate }"
+				:title="t('Due date') + ': ' + formattedDueDate"
 				class="due-date">
 				<CalendarBlankIcon :size="20"
 					class="icon" />
@@ -42,7 +42,7 @@
 		</div>
 		<div class="line">
 			<DeckIcon :size="20" class="title-icon" />
-			<a v-tooltip.top="{ content: stackTooltip }"
+			<a :title="stackTooltip"
 				:href="boardLink"
 				target="_blank"
 				class="link">
@@ -67,7 +67,7 @@
 					'description': true,
 					'short-description': shortDescription,
 				}">
-				<NcRichText v-tooltip.top="{ content: shortDescription ? t('deck', 'Click to expand description') : undefined }"
+				<NcRichText :title="shortDescription ? t('deck', 'Click to expand description') : undefined"
 					:text="card.description"
 					:use-markdown="true"
 					@click.native="shortDescription = !shortDescription" />
@@ -84,7 +84,7 @@
 				'comment': true,
 				'short-comment': shortComment,
 			}">
-				<NcRichText v-tooltip.top="{ content: shortComment ? t('deck', 'Click to expand comment') : undefined }"
+				<NcRichText :title="shortComment ? t('deck', 'Click to expand comment') : undefined"
 					:text="commentMessageText"
 					:use-markdown="false"
 					@click.native="shortComment = !shortComment" />