Replace all title attributes with actual boostrap tooltip functionality

cortezaproject · Nov 24, 2023 · 27af2a4 · 27af2a4
1 parent fc58070
commit 27af2a4
Show file tree

Hide file tree

Showing 64 changed files with 102 additions and 126 deletions.
diff --git a/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue b/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
@@ -130,10 +130,10 @@
 
               <b-button
                 v-else
+                v-b-tooltip.hover="{ title: $t('tooltip.regenerate-secret'), container: '#body' }"
                 data-test-id="button-regenerate-client-secret"
                 class="ml-1 text-primary"
                 variant="link"
-                :title="$t('tooltip.regenerate-secret')"
                 @click="$emit('regenerate-secret')"
               >
                 <font-awesome-icon

diff --git a/client/web/admin/src/components/Permissions/CPermissionList.vue b/client/web/admin/src/components/Permissions/CPermissionList.vue
@@ -35,7 +35,7 @@
             <label
               v-for="(n, index) in role.name"
               :key="index"
-              :title="n"
+              v-b-tooltip.hover="{ title: n, container: '#body' }"
               class="pointer text-center text-primary text-break mb-1"
             >
               {{ n }}
@@ -112,7 +112,7 @@
             >
               <p
                 v-if="i === 0"
-                :title="$t(`ui.${role.mode === 'edit' ? 'edit' : 'evaluate'}.title`)"
+                v-b-tooltip.hover="{ title: $t(`ui.${role.mode === 'edit' ? 'edit' : 'evaluate'}.title`), container: '#body' }"
                 class="mb-0"
               >
                 {{ $t(`ui.${role.mode === 'edit' ? 'edit' : 'evaluate'}.title`) }}
@@ -133,15 +133,15 @@
               cols="4"
             >
               <span
-                :title="getTranslation(type, operation)"
+                v-b-tooltip.hover="{ title: getTranslation(type, operation), container: '#body' }"
               >
                 {{ getTranslation(type, operation) }}
               </span>
             </b-col>
             <b-col
               v-for="role in roles"
               :key="role.ID"
-              :title="getRuleTooltip(checkRule(role.ID, permissions[type].any, operation, 'unknown-context'), !!role.userID)"
+              v-b-tooltip.hover="{ title: getRuleTooltip(checkRule(role.ID, permissions[type].any, operation, 'unknown-context'), !!role.userID), container: '#body' }"
               class="d-flex align-items-center justify-content-center border-bottom border-left p-3 pointer active-cell h5 mb-0"
               :class="{
                 'not-allowed bg-extra-light': role.mode === 'eval',

diff --git a/client/web/admin/src/views/Automation/Scripts/Index.vue b/client/web/admin/src/views/Automation/Scripts/Index.vue
@@ -218,8 +218,8 @@
 
           <template #cell(updatedAt)="{ value }">
             <time
+              v-b-tooltip.hover="{ title: value, container: '#body' }"
               :datetime="value.toISOString()"
-              :title="value"
             >
               {{ filter.absoluteTime ? value : value.fromNow() }}
             </time>

diff --git a/client/web/compose/package.json b/client/web/compose/package.json
@@ -79,7 +79,6 @@
     "prosemirror-model": "^1.11.2",
     "resolve-url-loader": "^3.1.0",
     "set-value": "^4.0.1",
-    "v-tooltip": "^2.0.2",
     "vue": "2.6.14",
     "vue-echarts": "^6.2.3",
     "vue-grid-layout": "^2.3.3",

diff --git a/client/web/compose/src/components/Admin/Module/FieldBoolTranslator.vue b/client/web/compose/src/components/Admin/Module/FieldBoolTranslator.vue
@@ -3,7 +3,7 @@
     v-if="canManageResourceTranslations && resourceTranslationsEnabled"
     v-bind="$props"
     :size="size"
-    :title="$t('tooltip')"
+    :tooltip="$t('tooltip')"
     :resource="resource"
     :fetcher="fetcher"
     :updater="updater"

diff --git a/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue b/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
@@ -55,8 +55,8 @@
         </b-select>
         <b-input-group-append>
           <b-button
+            v-b-tooltip.hover="{ title: $t('tooltip.field'), container: '#body' }"
             variant="light"
-            :title="$t('tooltip.field')"
             :disabled="!value.cap.configurable"
             @click.prevent="$emit('edit')"
           >

diff --git a/client/web/compose/src/components/Admin/Module/FieldSelectTranslator.vue b/client/web/compose/src/components/Admin/Module/FieldSelectTranslator.vue
@@ -2,7 +2,7 @@
   <c-translator-button
     v-if="canManageResourceTranslations && resourceTranslationsEnabled"
     v-bind="$props"
-    :title="$t('tooltip')"
+    :tooltip="$t('tooltip')"
     :size="size"
     :resource="resource"
     :fetcher="fetcher"

diff --git a/client/web/compose/src/components/Admin/Module/FieldTranslator.vue b/client/web/compose/src/components/Admin/Module/FieldTranslator.vue
@@ -2,7 +2,7 @@
   <c-translator-button
     v-if="canManageResourceTranslations && resourceTranslationsEnabled"
     v-bind="$props"
-    :title="$t('tooltip')"
+    :tooltip="$t('tooltip')"
     :size="size"
     :resource="resource"
     :titles="titles"

diff --git a/client/web/compose/src/components/Admin/Module/ModuleTranslator.vue b/client/web/compose/src/components/Admin/Module/ModuleTranslator.vue
@@ -2,7 +2,7 @@
   <c-translator-button
     v-if="canManageResourceTranslations && resourceTranslationsEnabled"
     v-bind="$props"
-    :title="$t('tooltip')"
+    :tooltip="$t('tooltip')"
     :resource="resource"
     :titles="titles"
     :fetcher="fetcher"

diff --git a/client/web/compose/src/components/Admin/Page/Builder/Selector.vue b/client/web/compose/src/components/Admin/Page/Builder/Selector.vue
@@ -55,7 +55,7 @@
 
           <b-input-group-append>
             <b-button
-              :title="$t('selector.tooltip.clone.noRef')"
+              v-b-tooltip.hover="{ title: $t('selector.tooltip.clone.noRef'), container: '#body' }"
               variant="light"
               :disabled="!selectedExistingBlock"
               class="d-flex align-items-center"
@@ -66,7 +66,7 @@
               />
             </b-button>
             <b-button
-              :title="$t('selector.tooltip.clone.ref')"
+              v-b-tooltip.hover="{ title: $t('selector.tooltip.clone.ref'), container: '#body' }"
               variant="light"
               :disabled="!selectedExistingBlock"
               class="d-flex align-items-center"

diff --git a/client/web/compose/src/components/Admin/Page/PageTranslator.vue b/client/web/compose/src/components/Admin/Page/PageTranslator.vue
@@ -2,7 +2,7 @@
   <c-translator-button
     v-if="canManageResourceTranslations && resourceTranslationsEnabled"
     v-bind="$props"
-    :title="$t('tooltip')"
+    :tooltip="$t('tooltip')"
     :resource="resource"
     :titles="titles"
     :fetcher="fetcher"

diff --git a/client/web/compose/src/components/Admin/Page/Tree.vue b/client/web/compose/src/components/Admin/Page/Tree.vue
@@ -27,8 +27,8 @@
               class="text-danger"
             >
               <font-awesome-icon
+                v-b-tooltip.hover="{ title: $t('notVisible'), container: '#body' }"
                 :icon="['fas', 'eye-slash']"
-                :title="$t('notVisible')"
               />
             </span>
             <b-badge
@@ -58,9 +58,9 @@
               </b-button>
 
               <b-button
+                v-b-tooltip.hover="{ title: $t('tooltip.view'), container: '#body' }"
                 data-test-id="button-page-view"
                 variant="primary"
-                :title="$t('tooltip.view')"
                 :to="pageViewer(item)"
                 class="d-flex align-items-center"
                 style="margin-left:2px;"
@@ -71,9 +71,9 @@
               </b-button>
 
               <b-button
+                v-b-tooltip.hover="{ title: $t('tooltip.edit.page'), container: '#body' }"
                 data-test-id="button-page-edit"
                 variant="primary"
-                :title="$t('tooltip.edit.page')"
                 :to="{name: 'admin.pages.edit', params: { pageID: item.pageID }}"
                 class="d-flex align-items-center"
                 style="margin-left:2px;"
@@ -86,10 +86,10 @@
 
             <b-dropdown
               v-if="item.canGrant || namespace.canGrant"
+              v-b-tooltip.hover="{ title: $t('permissions:resources.compose.page.tooltip'), container: '#body' }"
               data-test-id="dropdown-permissions"
               variant="light"
               size="sm"
-              :title="$t('permissions:resources.compose.page.tooltip')"
               class="permissions-dropdown ml-1"
             >
               <template #button-content>

diff --git a/client/web/compose/src/components/Admin/PageLayout/PageLayoutTranslator.vue b/client/web/compose/src/components/Admin/PageLayout/PageLayoutTranslator.vue
@@ -2,7 +2,7 @@
   <c-translator-button
     v-if="canManageResourceTranslations && resourceTranslationsEnabled"
     v-bind="$props"
-    :title="$t('tooltip')"
+    :tooltip="$t('tooltip')"
     :resource="resource"
     :titles="titles"
     :fetcher="fetcher"

diff --git a/client/web/compose/src/components/Common/RecordListFilter.vue b/client/web/compose/src/components/Common/RecordListFilter.vue
@@ -2,7 +2,7 @@
   <div>
     <b-button
       :id="popoverTarget"
-      :title="$t('recordList.filter.title')"
+      v-b-tooltip.hover="{ title: $t('recordList.filter.title'), container: '#body' }"
       :variant="variant"
       class="d-flex align-items-center text-secondary d-print-none border-0 px-1 h-100"
       :class="buttonClass"

diff --git a/client/web/compose/src/components/Common/RecordToolbar.vue b/client/web/compose/src/components/Common/RecordToolbar.vue
@@ -22,22 +22,22 @@
     <template #center>
       <b-button-group v-if="recordNavigation.prev || recordNavigation.next">
         <b-button
+          v-b-tooltip.hover="{ title: $t('recordNavigation.prev'), container: '#body' }"
           pill
           size="lg"
           variant="outline-primary"
           :disabled="!record || processing || !recordNavigation.prev"
-          :title="$t('recordNavigation.prev')"
           @click="navigateToRecord(recordNavigation.prev)"
         >
           <font-awesome-icon :icon="['fas', 'angle-left']" />
         </b-button>
 
         <b-button
+          v-b-tooltip.hover="{ title: $t('recordNavigation.next'), container: '#body' }"
           size="lg"
           pill
           variant="outline-primary"
           :disabled="!record || processing || !recordNavigation.next"
-          :title="$t('recordNavigation.next')"
           @click="navigateToRecord(recordNavigation.next)"
         >
           <font-awesome-icon :icon="['fas', 'angle-right']" />

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Bool.vue b/client/web/compose/src/components/ModuleFields/Editor/Bool.vue
@@ -14,9 +14,9 @@
         class="d-flex align-items-center text-primary p-0"
       >
         <span
+          v-b-tooltip.hover="{ title: label, container: '#body' }"
           class="d-inline-block mw-100 pt-0"
           :class="{ 'py-1': !horizontal }"
-          :title="label"
         >
           {{ label }}
         </span>

diff --git a/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue b/client/web/compose/src/components/ModuleFields/Editor/DateTime.vue
@@ -15,8 +15,8 @@
         class="d-flex align-items-center text-primary p-0"
       >
         <span
+          v-b-tooltip.hover="{ title: label, container: '#body' }"
           class="d-inline-block mw-100 py-1"
-          :title="label"
         >
           {{ label }}
         </span>

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Email.vue b/client/web/compose/src/components/ModuleFields/Editor/Email.vue
@@ -15,8 +15,8 @@
         class="d-flex align-items-center text-primary p-0"
       >
         <span
+          v-b-tooltip.hover="{ title: label, container: '#body' }"
           class="d-inline-block mw-100 py-1"
-          :title="label"
         >
           {{ label }}
         </span>

diff --git a/client/web/compose/src/components/ModuleFields/Editor/File.vue b/client/web/compose/src/components/ModuleFields/Editor/File.vue
@@ -14,8 +14,8 @@
         class="d-flex align-items-center text-primary p-0"
       >
         <span
+          v-b-tooltip.hover="{ title: label, container: '#body' }"
           class="d-inline-block mw-100 py-1"
-          :title="label"
         >
           {{ label }}
         </span>

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Number.vue b/client/web/compose/src/components/ModuleFields/Editor/Number.vue
@@ -14,8 +14,8 @@
         class="d-flex align-items-center text-primary p-0"
       >
         <span
+          v-b-tooltip.hover="{ title: label, container: '#body' }"
           class="d-inline-block mw-100 py-1"
-          :title="label"
         >
           {{ label }}
         </span>

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Record.vue b/client/web/compose/src/components/ModuleFields/Editor/Record.vue
@@ -14,8 +14,8 @@
         class="d-flex align-items-center text-primary p-0"
       >
         <span
+          v-b-tooltip.hover="{ title: label, container: '#body' }"
           class="d-inline-block mw-100 py-1"
-          :title="label"
         >
           {{ label }}
         </span>

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Select.vue b/client/web/compose/src/components/ModuleFields/Editor/Select.vue
@@ -14,8 +14,8 @@
         class="d-flex align-items-center text-primary p-0"
       >
         <span
+          v-b-tooltip.hover="{ title: label, container: '#body' }"
           class="d-inline-block mw-100 py-1"
-          :title="label"
         >
           {{ label }}
         </span>

diff --git a/client/web/compose/src/components/ModuleFields/Editor/String.vue b/client/web/compose/src/components/ModuleFields/Editor/String.vue
@@ -15,8 +15,8 @@
         class="d-flex align-items-center text-primary p-0"
       >
         <span
+          v-b-tooltip.hover="{ title: label, container: '#body' }"
           class="d-inline-block mw-100 py-1"
-          :title="label"
         >
           {{ label }}
         </span>

diff --git a/client/web/compose/src/components/ModuleFields/Editor/Url.vue b/client/web/compose/src/components/ModuleFields/Editor/Url.vue
@@ -14,8 +14,8 @@
         class="d-flex align-items-center text-primary p-0"
       >
         <span
+          v-b-tooltip.hover="{ title: label, container: '#body' }"
           class="d-inline-block mw-100 py-1"
-          :title="label"
         >
           {{ label }}
         </span>

diff --git a/client/web/compose/src/components/ModuleFields/Editor/User.vue b/client/web/compose/src/components/ModuleFields/Editor/User.vue
@@ -14,8 +14,8 @@
         class="d-flex align-items-center text-primary p-0"
       >
         <span
+          v-b-tooltip.hover="{ title: label, container: '#body' }"
           class="d-inline-block mw-100 py-1"
-          :title="label"
         >
           {{ label }}
         </span>

diff --git a/client/web/compose/src/components/ModuleFields/Editor/multi.vue b/client/web/compose/src/components/ModuleFields/Editor/multi.vue
@@ -23,9 +23,8 @@
         class="d-flex w-100 align-items-center mb-1"
       >
         <font-awesome-icon
-          v-b-tooltip.hover
+          v-b-tooltip.hover="{ title: $t('tooltip.dragAndDrop'), container: '#body' }"
           :icon="['fas', 'bars']"
-          :title="$t('tooltip.dragAndDrop')"
           class="handle text-light ml-1 mr-2"
         />
 

diff --git a/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue b/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
@@ -38,9 +38,9 @@
 
         <b-input-group-append v-if="canManageNamespaces">
           <b-button
+            v-b-tooltip.hover="{ title: $t('editNamespace'), container: '#body' }"
             data-test-id="button-namespace-edit"
             :disabled="!canUpdateNamespace"
-            :title="$t('editNamespace')"
             variant="primary"
             class="d-flex align-items-center"
             :to="{ name: 'namespace.edit', params: { namespaceID: namespaceID } }"

diff --git a/client/web/compose/src/components/Namespaces/NamespaceTranslator.vue b/client/web/compose/src/components/Namespaces/NamespaceTranslator.vue
@@ -1,8 +1,8 @@
 <template>
   <c-translator-button
     v-if="canManageResourceTranslations && resourceTranslationsEnabled"
+    v-b-tooltip.hover="{ title: $t('tooltip'), container: '#body' }"
     v-bind="$props"
-    :title="$t('tooltip')"
     :resource="resource"
     :titles="titles"
     :fetcher="fetcher"

diff --git a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
@@ -94,9 +94,9 @@
 
           <b-input-group-append>
             <b-button
+              v-b-tooltip.hover="{ title: $t('reminder.recordPageLink'), container: '#body' }"
               :disabled="!recordViewer"
               :to="recordViewer"
-              :title="$t('reminder.recordPageLink')"
               variant="light"
               class="d-flex align-items-center text-primary"
             >