Replace title attribute with instant tooltips (#704)

Closes #648.

.eslintrc.js

@@ -53,6 +53,21 @@ module.exports = {
       asyncArrow: 'always'
     }],
     'spaced-comment': 'off',
+    'vue/attributes-order': ['error', {
+      order: [
+        'DEFINITION',
+        'LIST_RENDERING',
+        'CONDITIONALS',
+        'RENDER_MODIFIERS',
+        'GLOBAL',
+        ['UNIQUE', 'SLOT'],
+        'TWO_WAY_BINDING',
+        ['OTHER_DIRECTIVES', 'OTHER_ATTR'],
+        'EVENTS',
+        'CONTENT'
+      ],
+      alphabetical: false
+    }],
     'vue/first-attribute-linebreak': 'off',
     'vue/html-closing-bracket-newline': ['error', {
       singleline: 'never',

package.json

@@ -15,6 +15,7 @@
     "pre-commit": "node bin/transifex/restructure.js && git diff --exit-code -- transifex/strings_en.json"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.1.0",
     "axios": "^0.22.0",
     "bootstrap": "~3",
     "dompurify": "~2",

src/assets/scss/app.scss

@@ -74,6 +74,23 @@ em:lang(ja) {
   font-weight: bold;
 }
 
+.tooltip {
+  /* v-tooltip.aria-describedby tooltips are rendered before they are shown
+  on-screen. `display` is not set to `none` for those tooltips. Instead, they
+  are transparent. However, we do need to position them: otherwise, they would
+  result in extra space at the bottom of the page. I tried using the sr-only
+  class, but that resulted in Floating UI miscalculating the position of the
+  tooltip. Instead, tooltips will be positioned at the top of the page. */
+  top: 0;
+  // Move the tooltip to the left so that it doesn't obstruct the navbar.
+  left: -1000px;
+}
+.tooltip-inner {
+  overflow-wrap: break-word;
+  // Allow the text to have line breaks.
+  white-space: pre-line;
+}
+
 
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -198,8 +215,8 @@ a, .btn-link {
 
 a {
   &.disabled, fieldset[disabled] & {
-    // Not specifying pointer-events so that the cursor and any title attribute
-    // is shown.
+    // Not specifying pointer-events so that the cursor and any tooltip is
+    // shown.
 
     &.btn { color: #fff; }
   }

src/components/actor-link.vue

@@ -10,8 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <link-if-can v-if="actor.type === 'user' && actor.deletedAt == null" :to="to" class="actor-link" :title="actor.displayName">{{ actor.displayName }}</link-if-can>
-  <span v-else class="actor-link" :title="actor.displayName">{{ actor.displayName }}</span>
+  <link-if-can v-if="actor.type === 'user' && actor.deletedAt == null" :to="to" class="actor-link" v-tooltip.text>{{ actor.displayName }}</link-if-can>
+  <span v-else class="actor-link" v-tooltip.text>{{ actor.displayName }}</span>
 </template>
 
 <script>

src/components/app.vue

@@ -21,6 +21,7 @@ except according to the terms contained in the LICENSE file.
     <div class="container-fluid" @click.capture="hideAlertAfterClick">
       <router-view/>
     </div>
+    <div id="tooltips"></div>
   </div>
 </template>
 

src/components/audit/row.vue

@@ -20,20 +20,25 @@ except according to the terms contained in the LICENSE file.
     </td>
     <td class="initiator">
       <template v-if="audit.actor != null">
-        <span v-if="audit.actor.deletedAt != null" class="icon-trash" :title="$t('deletedMessage')"></span>
+        <span v-if="audit.actor.deletedAt != null" class="icon-trash" v-tooltip.sr-only></span>
         <actor-link :actor="audit.actor"/>
+        <span v-if="audit.actor.deletedAt != null" class="sr-only">
+          &nbsp;{{ $t('deletedMessage') }}
+        </span>
       </template>
     </td>
     <td class="target">
       <template v-if="target != null">
         <router-link v-if="target.path != null" :to="target.path"
-          :title="target.title">
+          v-tooltip.text>
           {{ target.title }}
         </router-link>
         <template v-else>
-          <span v-if="target.deleted" class="icon-trash" :title="$t('deletedMessage')"></span>
-          <span v-else-if="target.purged" class="icon-trash" :title="$t('purgedMessage')"></span>
-          <span :title="target.title">{{ target.title }}</span>
+          <span v-if="target.deleted || target.purged" class="icon-trash" v-tooltip.sr-only></span>
+          <span v-tooltip.text>{{ target.title }}</span>
+          <span v-if="target.deleted || target.purged" class="sr-only">
+            &nbsp;{{ target.deleted ? $t('deletedMessage') : $t('purgedMessage') }}
+          </span>
         </template>
       </template>
     </td>
@@ -156,11 +161,7 @@ export default {
   }
 
   .initiator, .target { @include text-overflow-ellipsis; }
-
-  .icon-trash {
-    cursor: help;
-    margin-right: $margin-right-icon;
-  }
+  .icon-trash { margin-right: $margin-right-icon; }
 }
 </style>
 

src/components/dataset/overview/connection-to-forms.vue

@@ -21,7 +21,7 @@ except according to the terms contained in the LICENSE file.
         <expandable-row v-for="(form) in propertiesByForm" :key="form.xmlFormId">
           <template #title>
             <div class="form-name">
-              <router-link :to="publishedFormPath(projectId, form.xmlFormId)" :title="form.name">{{ form.name }}</router-link>
+              <router-link :to="publishedFormPath(projectId, form.xmlFormId)" v-tooltip.text>{{ form.name }}</router-link>
             </div>
           </template>
           <template #caption>

src/components/dataset/overview/dataset-properties.vue

@@ -26,15 +26,15 @@ except according to the terms contained in the LICENSE file.
             {{ property.name }}
           </td>
           <td>
-            <router-link v-if="property.forms.length > 0" :to="publishedFormPath(projectId, property.forms[0].xmlFormId)" :title="property.forms[0].name">
+            <router-link v-if="property.forms.length > 0" :to="publishedFormPath(projectId, property.forms[0].xmlFormId)" v-tooltip.text>
               {{ property.forms[0].name }}
             </router-link>
           </td>
         </tr>
         <template v-for="(form, index) in property.forms" :key="form.xmlFormId">
           <tr v-if="index > 0">
             <td>
-              <router-link :to="publishedFormPath(projectId, form.xmlFormId)" :title="form.name">{{ form.name }}</router-link>
+              <router-link :to="publishedFormPath(projectId, form.xmlFormId)" v-tooltip.text>{{ form.name }}</router-link>
             </td>
           </tr>
         </template>

src/components/dataset/overview/linked-forms.vue

@@ -21,7 +21,7 @@ except according to the terms contained in the LICENSE file.
         <tbody>
           <tr v-for="(form) in linkedForms" :key="form.xmlFormId">
             <td>
-              <router-link :to="publishedFormPath(projectId, form.xmlFormId)" :title="form.name">{{ form.name }}</router-link>
+              <router-link :to="publishedFormPath(projectId, form.xmlFormId)" v-tooltip.text>{{ form.name }}</router-link>
             </td>
           </tr>
         </tbody>

src/components/dataset/row.vue

@@ -12,7 +12,7 @@ except according to the terms contained in the LICENSE file.
 <template>
   <tr class="dataset-row">
     <td class="name">
-      <router-link :title="dataset.name" :to="datasetOverviewPage">{{ dataset.name }}</router-link>
+      <router-link :to="datasetOverviewPage" v-tooltip.text>{{ dataset.name }}</router-link>
     </td>
     <td class="entities">
       <span>{{ $n(dataset.entities, 'default') }}</span>

src/components/dataset/summary/row.vue

@@ -14,7 +14,7 @@ except according to the terms contained in the LICENSE file.
     <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/interactive-supports-focus -->
     <div class="row" role="button" @click.prevent="toggleExpanded">
       <div class="col-xs-6 dataset-name-wrap">
-        <div class="dataset-name text-overflow-ellipsis" :title="dataset.name">{{ dataset.name }}</div>
+        <div class="dataset-name text-overflow-ellipsis" v-tooltip.text>{{ dataset.name }}</div>
         <div v-if="dataset.isNew" class="dataset-new">
           <span class="icon-plus-circle"></span>
           {{ $t('new') }}
@@ -32,7 +32,8 @@ except according to the terms contained in the LICENSE file.
     <div v-show="expanded" class="property-list">
       <span v-for="(property, index) in inFormProperties" :key="property.name">
         <span>{{ property.name }}</span>
-        <span v-if="property.isNew" class="icon-plus-circle property-new" :title="$t('addedByThisDraft')"></span>
+        <span v-if="property.isNew" class="icon-plus-circle property-new" v-tooltip.sr-only></span>
+        <span class="sr-only">&nbsp;{{ $t('addedByThisDraft') }}</span>
         <template v-if="index < inFormProperties.length - 1">{{ $t('common.punctuations.comma') }}<sentence-separator/></template>
       </span>
     </div>

src/components/date-time.vue

@@ -10,7 +10,7 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <time v-if="iso != null" :datetime="iso" :title="title">{{ format(true) }}</time>
+  <time v-if="iso != null" :datetime="iso" v-tooltip.no-aria="tooltipText">{{ format(true) }}</time>
   <span v-else>{{ blank }}</span>
 </template>
 
@@ -40,7 +40,7 @@ export default {
     dateTime() {
       return DateTime.fromISO(this.iso, { locale: this.$i18n.locale });
     },
-    title() {
+    tooltipText() {
       return this.tooltip ? this.format(false) : null;
     }
   },

src/components/enketo/fill.vue

@@ -10,12 +10,12 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <a v-if="disabledTitle == null" class="enketo-fill btn btn-primary"
+  <a v-if="disabledDescription == null" class="enketo-fill btn btn-primary"
     :href="href" target="_blank">
     <slot></slot>
   </a>
   <button v-else type="button" class="enketo-fill btn btn-primary" aria-disabled="true"
-    :title="disabledTitle">
+    v-tooltip.aria-describedby="disabledDescription">
     <slot></slot>
   </button>
 </template>
@@ -32,7 +32,7 @@ export default {
     }
   },
   computed: {
-    disabledTitle() {
+    disabledDescription() {
       if (this.formVersion.publishedAt != null &&
         this.formVersion.state !== 'open')
         return this.$t('disabled.notOpen');

src/components/enketo/preview.vue

@@ -10,12 +10,12 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <a v-if="disabledTitle == null" class="enketo-preview btn btn-default"
+  <a v-if="disabledDescription == null" class="enketo-preview btn btn-default"
     :href="href" target="_blank">
     <span class="icon-eye"></span>{{ $t('action.showPreview') }}
   </a>
   <button v-else type="button" class="enketo-preview btn btn-default" aria-disabled="true"
-    :title="disabledTitle">
+    v-tooltip.aria-describedby="disabledDescription">
     <span class="icon-eye"></span>{{ $t('action.showPreview') }}
   </button>
 </template>
@@ -32,7 +32,7 @@ export default {
     }
   },
   computed: {
-    disabledTitle() {
+    disabledDescription() {
       if (this.formVersion.publishedAt != null &&
         this.formVersion.state !== 'open')
         return this.$t('disabled.notOpen');

src/components/field-key/row.vue

@@ -12,7 +12,7 @@ except according to the terms contained in the LICENSE file.
 <template>
   <tr class="field-key-row" :class="{ success: fieldKey.id === highlighted }">
     <td class="display-name">
-      <span :title="fieldKey.displayName">{{ fieldKey.displayName }}</span>
+      <span v-tooltip.text>{{ fieldKey.displayName }}</span>
     </td>
     <td>
       <time-and-user :iso="fieldKey.createdAt" :user="fieldKey.createdBy"/>

src/components/form-attachment/row.vue

@@ -12,13 +12,12 @@ except according to the terms contained in the LICENSE file.
 <template>
   <tr :class="htmlClass">
     <td class="form-attachment-list-type">{{ type }}</td>
-    <td :title="attachment.name" class="form-attachment-list-name">
-      <a v-if="attachment.blobExists" :href="href" target="_blank">
+    <td class="form-attachment-list-name">
+      <a v-if="attachment.blobExists" :href="href" target="_blank"
+        v-tooltip.text>
         {{ attachment.name }}
       </a>
-      <template v-else>
-        {{ attachment.name }}
-      </template>
+      <span v-else v-tooltip.text>{{ attachment.name }}</span>
     </td>
     <td class="form-attachment-list-uploaded">
       <template v-if="attachment.datasetExists">
@@ -39,10 +38,11 @@ except according to the terms contained in the LICENSE file.
         </span>
       </template>
       <template v-else>
-        <span class="icon-exclamation-triangle"></span>
-        <span :title="$t('notUploaded.title')">
-          {{ $t('notUploaded.text') }}
+        <span v-tooltip.sr-only>
+          <span class="icon-exclamation-triangle"></span>
+          <span>{{ $t('notUploaded.text') }}</span>
         </span>
+        <span class="sr-only">&nbsp;{{ $t('notUploaded.title') }}</span>
       </template>
     </td>
     <td class="form-attachment-list-action">
@@ -172,10 +172,6 @@ export default {
     .icon-exclamation-triangle {
       color: #e1bf50;
       margin-right: $margin-right-icon;
-
-      + span {
-        cursor: help;
-      }
     }
 
     .form-attachment-list-uploaded{

src/components/form-version/string.vue

@@ -10,7 +10,8 @@ including this file, may be copied, modified, propagated, or distributed
 except according to the terms contained in the LICENSE file.
 -->
 <template>
-  <span :class="htmlClass" :title="versionOrBlank">{{ versionOrBlank }}</span>
+  <span v-if="version !== ''" class="form-version-string" v-tooltip.text>{{ version }}</span>
+  <span v-else class="form-version-string blank-version">{{ $t('blank') }}</span>
 </template>
 
 <script>
@@ -21,16 +22,6 @@ export default {
       type: String,
       required: true
     }
-  },
-  computed: {
-    htmlClass() {
-      return this.version !== ''
-        ? 'form-version-string'
-        : 'form-version-string blank-version';
-    },
-    versionOrBlank() {
-      return this.version !== '' ? this.version : this.$t('blank');
-    }
   }
 };
 </script>