[stable30] fix: replace v-tooltip with native title

src/components/AdminSettings/TurnServer.vue

@@ -19,11 +19,11 @@
  @input="updateSchemes" />
 
  <NcTextField ref="turn_server"
- v-tooltip.auto="turnServerError"
  name="turn_server"
  placeholder="turnserver:port"
  class="turn-server__textfield"
  :class="{ error: turnServerError }"
+ :title="turnServerError"
  :value="server"
  :disabled="loading"
  :label="t('spreed', 'TURN server URL')"
@@ -92,17 +92,12 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { isCertificateValid } from '../../services/certificateService.js'
 
 export default {
  name: 'TurnServer',
 
- directives: {
- Tooltip,
- },
-
  components: {
  AlertCircle,
  Check,

src/components/AdminSettings/WebServerSetupChecks.vue

@@ -14,10 +14,10 @@
  <ul class="web-server-setup-checks">
  <li class="virtual-background">
  {{ t('spreed', 'Files required for virtual background can be loaded') }}
- <NcButton v-tooltip="virtualBackgroundAvailableToolTip"
- type="tertiary"
+ <NcButton type="tertiary"
  class="vue-button-inline"
  :class="{'success-button': virtualBackgroundAvailable === true, 'error-button': virtualBackgroundAvailable === false}"
+ :title="virtualBackgroundAvailableTitle"
  :aria-label="virtualBackgroundAvailableAriaLabel"
  @click="checkVirtualBackground">
  <template #icon>
@@ -41,7 +41,6 @@ import { generateFilePath } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { VIRTUAL_BACKGROUND } from '../../constants.js'
 import JitsiStreamBackgroundEffect from '../../utils/media/effects/virtual-background/JitsiStreamBackgroundEffect.js'
@@ -50,10 +49,6 @@ import VirtualBackground from '../../utils/media/pipeline/VirtualBackground.js'
 export default {
  name: 'WebServerSetupChecks',
 
- directives: {
- Tooltip,
- },
-
  components: {
  AlertCircle,
  NcButton,
@@ -85,7 +80,7 @@ export default {
  return t('spreed', 'Checking …')
  },
 
- virtualBackgroundAvailableToolTip() {
+ virtualBackgroundAvailableTitle() {
  if (this.virtualBackgroundAvailable === false && !VirtualBackground.isWasmSupported()) {
  return t('spreed', 'Failed: WebAssembly is disabled or not supported in this browser. Please enable WebAssembly or use a browser with support for it to do the check.')
  }

src/components/CallView/Grid/Grid.vue

@@ -8,7 +8,8 @@
  <NcButton v-if="isStripe && !isRecording"
  class="stripe--collapse"
  type="tertiary-no-background"
- :aria-label="stripeButtonTooltip"
+ :title="stripeButtonTitle"
+ :aria-label="stripeButtonTitle"
  @click="handleClickStripeCollapse">
  <template #icon>
  <ChevronDown v-if="stripeOpen"
@@ -274,7 +275,7 @@ export default {
  },
 
  computed: {
- stripeButtonTooltip() {
+ stripeButtonTitle() {
  if (this.stripeOpen) {
  return t('spreed', 'Collapse stripe')
  } else {

src/components/CallView/shared/LocalAudioControlButton.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
- <NcButton v-tooltip="audioButtonTooltip"
+ <NcButton :title="audioButtonTitle"
  :type="type"
  :aria-label="audioButtonAriaLabel"
  :class="{ 'no-audio-available': !model.attributes.audioAvailable }"
@@ -26,7 +26,6 @@ import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import VolumeIndicator from '../../UIShared/VolumeIndicator.vue'
 
@@ -41,10 +40,6 @@ export default {
  VolumeIndicator,
  },
 
- directives: {
- Tooltip,
- },
-
  props: {
  conversation: {
  type: Object,
@@ -81,40 +76,28 @@ export default {
  return this.model.attributes.audioAvailable && this.model.attributes.audioEnabled
  },
 
- audioButtonTooltip() {
+ audioButtonTitle() {
  if (!this.isAudioAllowed) {
  return t('spreed', 'You are not allowed to enable audio')
  }
 
  if (!this.model.attributes.audioAvailable) {
- return {
- content: t('spreed', 'No audio. Click to select device'),
- show: false,
- }
+ return t('spreed', 'No audio. Click to select device')
  }
 
  if (this.speakingWhileMutedNotification && !this.screenSharingMenuOpen) {
- return {
- content: this.speakingWhileMutedNotification,
- show: true,
- }
+ return this.speakingWhileMutedNotification
  }
 
- let content = ''
  if (this.model.attributes.audioEnabled) {
- content = this.disableKeyboardShortcuts
+ return this.disableKeyboardShortcuts
  ? t('spreed', 'Mute audio')
  : t('spreed', 'Mute audio (M)')
  } else {
- content = this.disableKeyboardShortcuts
+ return this.disableKeyboardShortcuts
  ? t('spreed', 'Unmute audio')
  : t('spreed', 'Unmute audio (M)')
  }
-
- return {
- content,
- show: false,
- }
  },
 
  audioButtonAriaLabel() {

src/components/CallView/shared/LocalVideoControlButton.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
- <NcButton v-tooltip="videoButtonTooltip"
+ <NcButton :title="videoButtonTitle"
  :type="type"
  :aria-label="videoButtonAriaLabel"
  :class="{ 'no-video-available': !model.attributes.videoAvailable }"
@@ -26,7 +26,6 @@ import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import { useHotKey } from '@nextcloud/vue/dist/Composables/useHotKey.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import { PARTICIPANT } from '../../../constants.js'
 import BrowserStorage from '../../../services/BrowserStorage.js'
@@ -40,10 +39,6 @@ export default {
  VideoOff,
  },
 
- directives: {
- Tooltip,
- },
-
  props: {
  conversation: {
  type: Object,
@@ -80,7 +75,7 @@ export default {
  return this.model.attributes.videoAvailable && this.model.attributes.videoEnabled
  },
 
- videoButtonTooltip() {
+ videoButtonTitle() {
  if (!this.isVideoAllowed) {
  return t('spreed', 'You are not allowed to enable video')
  }

src/components/CallView/shared/VideoBottomBar.vue

@@ -33,8 +33,8 @@
  group>
  <NcButton v-if="showAudioIndicator"
  key="audioIndicator"
- v-tooltip="audioButtonTooltip"
- :aria-label="audioButtonTooltip"
+ :title="audioButtonTitle"
+ :aria-label="audioButtonTitle"
  class="audioIndicator"
  type="tertiary-no-background"
  :disabled="isAudioButtonDisabled"
@@ -47,8 +47,8 @@
 
  <NcButton v-if="showVideoIndicator"
  key="videoIndicator"
- v-tooltip="videoButtonTooltip"
- :aria-label="videoButtonTooltip"
+ :title="videoButtonTitle"
+ :aria-label="videoButtonTitle"
  class="videoIndicator"
  type="tertiary-no-background"
  @click.stop="toggleVideo">
@@ -60,7 +60,7 @@
 
  <NcButton v-if="showScreenSharingIndicator"
  key="screenSharingIndicator"
- v-tooltip="t('spreed', 'Show screen')"
+ :title="t('spreed', 'Show screen')"
  :aria-label="t('spreed', 'Show screen')"
  class="screenSharingIndicator"
  :class="{'screen-visible': sharedData.screenVisible}"
@@ -101,7 +101,6 @@ import { emit } from '@nextcloud/event-bus'
 import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'
 
@@ -123,10 +122,6 @@ export default {
  VideoOff,
  },
 
- directives: {
- Tooltip,
- },
-
  inheritAttrs: false,
 
  props: {
@@ -210,7 +205,7 @@ export default {
  isAudioButtonDisabled() {
  return !this.model.attributes.audioAvailable || !this.canFullModerate
  },
- audioButtonTooltip() {
+ audioButtonTitle() {
  return this.model.attributes.audioAvailable
  ? t('spreed', 'Mute')
  : t('spreed', 'Muted')
@@ -226,7 +221,7 @@ export default {
  isRemoteVideoBlocked() {
  return this.sharedData.remoteVideoBlocker && !this.sharedData.remoteVideoBlocker.isVideoEnabled()
  },
- videoButtonTooltip() {
+ videoButtonTitle() {
  return this.isRemoteVideoEnabled
  ? t('spreed', 'Disable video')
  : t('spreed', 'Enable video')

src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue

@@ -43,8 +43,8 @@
  ({{ processStateText }})
  </NcCheckboxRadioSwitch>
  <NcButton v-if="enabled"
- v-tooltip.top="{ content: t('spreed', 'Show Matterbridge log') }"
  type="tertiary"
+ :title="t('spreed', 'Show Matterbridge log')"
  :aria-label="t('spreed', 'Show Matterbridge log')"
  @click="showLogContent">
  <template #icon>
@@ -94,7 +94,6 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadi
 import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
 import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
 import NcTextArea from '@nextcloud/vue/dist/Components/NcTextArea.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import BridgePart from './BridgePart.vue'
 
@@ -119,10 +118,6 @@ export default {
  Plus,
  },
 
- directives: {
- Tooltip,
- },
-
  setup() {
  return {
  sidebarStore: useSidebarStore(),

src/components/MediaSettings/MediaSettings.vue

@@ -44,9 +44,9 @@
  <!-- Audio and video toggles -->
  <div class="media-settings__toggles">
  <!-- Audio toggle -->
- <NcButton v-tooltip="audioButtonTooltip"
- type="tertiary"
- :aria-label="audioButtonTooltip"
+ <NcButton type="tertiary"
+ :title="audioButtonTitle"
+ :aria-label="audioButtonTitle"
  :disabled="!audioPreviewAvailable"
  @click="toggleAudio">
  <template #icon>
@@ -59,9 +59,9 @@
  </NcButton>
 
  <!-- Video toggle -->
- <NcButton v-tooltip="videoButtonTooltip"
- type="tertiary"
- :aria-label="videoButtonTooltip"
+ <NcButton type="tertiary"
+ :title="videoButtonTitle"
+ :aria-label="videoButtonTitle"
  :disabled="!videoPreviewAvailable"
  @click="toggleVideo">
  <template #icon>
@@ -193,7 +193,6 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
-import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import MediaDevicesSelector from './MediaDevicesSelector.vue'
 import MediaDevicesSpeakerTest from './MediaDevicesSpeakerTest.vue'
@@ -217,10 +216,6 @@ import { localMediaModel } from '../../utils/webrtc/index.js'
 export default {
  name: 'MediaSettings',
 
- directives: {
- Tooltip,
- },
-
  components: {
  AvatarWrapper,
  Bell,
@@ -361,14 +356,14 @@ export default {
  return this.videoPreviewAvailable && this.videoOn
  },
 
- audioButtonTooltip() {
+ audioButtonTitle() {
  if (!this.audioPreviewAvailable) {
  return t('spreed', 'No audio')
  }
  return this.audioOn ? t('spreed', 'Mute audio') : t('spreed', 'Unmute audio')
  },
 
- videoButtonTooltip() {
+ videoButtonTitle() {
  if (!this.videoPreviewAvailable) {
  return t('spreed', 'No camera')
  }

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -328,9 +328,9 @@ export default {
  readInfo() {
  return {
  showCommonReadIcon: this.showCommonReadIcon,
- commonReadIconTooltip: t('spreed', 'Message read by everyone who shares their reading status'),
+ commonReadIconTitle: t('spreed', 'Message read by everyone who shares their reading status'),
  showSentIcon: this.showSentIcon,
- sentIconTooltip: t('spreed', 'Message sent'),
+ sentIconTitle: t('spreed', 'Message sent'),
  }
  },
 

src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.spec.js

@@ -81,8 +81,8 @@ describe('MessageButtonsBar.vue', () => {
  readInfo: {
  showCommonReadIcon: true,
  showSentIcon: true,
- commonReadIconTooltip: '',
- sentIconTooltip: '',
+ commonReadIconTitle: '',
+ sentIconTitle: '',
  },
  isTranslationAvailable: false,
  }