Merge pull request #5196 from nextcloud/backport/5174/stable28

[stable28] feat: switch to native browser tooltips

src/components/Editor/GuestNameDialog.vue

@@ -21,7 +21,7 @@
  -->
 
 <template>
- <form v-tooltip="t('text', 'Enter your name so other people can see who is editing')" class="guest-name-dialog" @submit.prevent="setGuestName()">
+ <form :title="t('text', 'Enter your name so other people can see who is editing')" class="guest-name-dialog" @submit.prevent="setGuestName()">
  <label><AvatarWrapper :session="session" :size="32" /></label>
  <input v-model="guestName"
  type="text"
@@ -35,7 +35,6 @@
 </template>
 
 <script>
-import { Tooltip } from '@nextcloud/vue'
 import { generateUrl } from '@nextcloud/router'
 import AvatarWrapper from './AvatarWrapper.vue'
 import { useSyncServiceMixin } from '../Editor.provider.js'
@@ -45,9 +44,6 @@ export default {
  components: {
  AvatarWrapper,
  },
- directives: {
- tooltip: Tooltip,
- },
  mixins: [
  useSyncServiceMixin,
  ],

src/components/Editor/SessionList.vue

@@ -22,17 +22,17 @@
 
 <template>
  <NcPopover class="session-list" placement="bottom">
- <button slot="trigger"
- v-tooltip.bottom="label"
- :title="label"
- :aria-label="label"
- class="avatar-list">
- <div class="avatardiv icon-group" />
- <AvatarWrapper v-for="session in sessionsVisible"
- :key="session.id"
- :session="session"
-  :size="40" />
- </button>
+ <div slot="trigger">
+ <button :title="label"
+  :aria-label="label"
+  class="avatar-list">
+  <div class="avatardiv icon-group" />
+  <AvatarWrapper v-for="session in sessionsVisible"
+  :key="session.id"
+  :session="session"
+  :size="40" />
+ </button>
+ </div>
  <template #default>
  <div class="session-menu">
  <slot name="lastSaved" />
@@ -64,7 +64,7 @@
 </template>
 
 <script>
-import { NcPopover, Tooltip } from '@nextcloud/vue'
+import { NcPopover } from '@nextcloud/vue'
 import AvatarWrapper from './AvatarWrapper.vue'
 import { mapActions, mapState } from 'vuex'
 import store from '../../mixins/store.js'
@@ -76,9 +76,6 @@ export default {
  AvatarWrapper,
  NcPopover,
  },
- directives: {
- tooltip: Tooltip,
- },
  mixins: [store],
  props: {
  sessions: {

src/components/Editor/Status.vue

@@ -22,7 +22,7 @@
 
 <template>
  <div class="text-editor__session-list">
- <div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="saveStatusClass">
+ <div :title="lastSavedStatusTooltip" class="save-status" :class="saveStatusClass">
  <NcButton type="tertiary"
  :aria-label="t('text', 'Save document')"
  @click="onClickSave">
@@ -45,7 +45,7 @@
 
 import { ERROR_TYPE } from '../../services/SyncService.js'
 import moment from '@nextcloud/moment'
-import { NcButton, NcSavingIndicatorIcon, Tooltip } from '@nextcloud/vue'
+import { NcButton, NcSavingIndicatorIcon } from '@nextcloud/vue'
 import {
  useIsMobileMixin,
  useIsPublicMixin,
@@ -63,10 +63,6 @@ export default {
  GuestNameDialog: () => import(/* webpackChunkName: "editor-guest" */'./GuestNameDialog.vue'),
  },
 
- directives: {
- Tooltip,
- },
-
  mixins: [
  useIsMobileMixin,
  useIsPublicMixin,
@@ -117,7 +113,7 @@ export default {
  if (this.dirty || this.hasUnsavedChanges) {
  message += ' - ' + t('text', 'Unsaved changes')
  }
- return { content: message, placement: 'bottom' }
+ return message
  },
 
  hasUnsavedChanges() {

src/components/HelpModal.vue

@@ -179,17 +179,14 @@
 </template>
 
 <script>
-import { NcModal, Tooltip } from '@nextcloud/vue'
+import { NcModal } from '@nextcloud/vue'
 import { isMobilePlatform } from '../helpers/platform.js'
 
 export default {
  name: 'HelpModal',
  components: {
  NcModal,
  },
- directives: {
- Tooltip,
- },
  data() {
  return {
  formatted: {

src/components/Menu/ActionAttachmentUpload.vue

@@ -23,6 +23,7 @@
  <NcActions class="entry-action entry-action__image-upload"
  :data-text-action-entry="actionEntry.key"
  :name="actionEntry.label"
+ :title="actionEntry.label"
  :aria-label="actionEntry.label"
  :container="menuIDSelector"
  role="menu"

src/components/Menu/ActionInsertLink.vue

@@ -20,6 +20,7 @@
 <template>
  <NcActions class="entry-action entry-action__insert-link"
  aria-haspopup
+ :title="actionEntry.label"
  :aria-label="actionEntry.label"
  :class="activeClass"
  :container="menuIDSelector"

src/components/Menu/ActionList.vue

@@ -21,7 +21,7 @@
  -->
 
 <template>
- <NcActions v-tooltip="tooltip"
+ <NcActions :title="tooltip"
  class="entry-list-action entry-action"
  role="menu"
  v-bind="state"

src/components/Menu/BaseActionEntry.js

@@ -22,7 +22,6 @@
 
 /* eslint-disable jsdoc/valid-types */
 
-import { Tooltip } from '@nextcloud/vue'
 import debounce from 'debounce'
 
 import { useEditorMixin, useIsMobileMixin } from '../Editor.provider.js'
@@ -36,9 +35,6 @@ import './ActionEntry.scss'
  * @type {import("vue").ComponentOptions} BaseActionEntry
  */
 const BaseActionEntry = {
- directives: {
- Tooltip,
- },
  mixins: [useEditorMixin, useIsMobileMixin, useStore, useOutlineActions, useOutlineStateMixin],
  props: {
  actionEntry: {

src/components/Menu/EmojiPickerAction.vue

@@ -24,16 +24,17 @@
  :data-text-action-entry="actionEntry.key"
  :container="menuIDSelector"
  @select-data="addEmoji">
- <NcButton v-tooltip="actionEntry.label"
- class="entry-action__button"
- role="menu"
- :title="actionEntry.label"
- :aria-label="actionEntry.label"
- :aria-haspopup="true">
- <template #icon>
- <component :is="icon" />
- </template>
- </NcButton>
+ <div>
+ <NcButton class="entry-action__button"
+ role="menu"
+ :title="actionEntry.label"
+ :aria-label="actionEntry.label"
+ :aria-haspopup="true">
+ <template #icon>
+ <component :is="icon" />
+ </template>
+ </NcButton>
+ </div>
  </NcEmojiPicker>
 </template>