diff --git a/.eslintrc.js b/.eslintrc.js
index 04081bc90..e02011018 100644
--- a/.eslintrc.js
+++ b/.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',
diff --git a/package-lock.json b/package-lock.json
index 12ccaca3e..be11944ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "odk-central-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@floating-ui/dom": "^1.1.0",
         "axios": "^0.22.0",
         "bootstrap": "~3",
         "dompurify": "~2",
@@ -507,6 +508,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.1.0.tgz",
+      "integrity": "sha512-zbsLwtnHo84w1Kc8rScAo5GMk1GdecSlrflIbfnEBJwvTSj1SL6kkOYV+nHraMCPEy+RNZZUaZyL8JosDGCtGQ=="
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz",
+      "integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.5"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -13029,6 +13043,19 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.1.0.tgz",
+      "integrity": "sha512-zbsLwtnHo84w1Kc8rScAo5GMk1GdecSlrflIbfnEBJwvTSj1SL6kkOYV+nHraMCPEy+RNZZUaZyL8JosDGCtGQ=="
+    },
+    "@floating-ui/dom": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.1.0.tgz",
+      "integrity": "sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==",
+      "requires": {
+        "@floating-ui/core": "^1.0.5"
+      }
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
diff --git a/package.json b/package.json
index 32312205b..0c7ce8cbc 100644
--- a/package.json
+++ b/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",
diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss
index d1cfae79f..8c1ec7e72 100644
--- a/src/assets/scss/app.scss
+++ b/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; }
   }
diff --git a/src/components/actor-link.vue b/src/components/actor-link.vue
index 3bc09fc79..a7cbea94a 100644
--- a/src/components/actor-link.vue
+++ b/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>
diff --git a/src/components/app.vue b/src/components/app.vue
index 57c10827b..47224287b 100644
--- a/src/components/app.vue
+++ b/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>
 
diff --git a/src/components/audit/row.vue b/src/components/audit/row.vue
index 02edb26dd..8092d1f2c 100644
--- a/src/components/audit/row.vue
+++ b/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>
 
diff --git a/src/components/dataset/overview/connection-to-forms.vue b/src/components/dataset/overview/connection-to-forms.vue
index c017d8582..3e162fce7 100644
--- a/src/components/dataset/overview/connection-to-forms.vue
+++ b/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>
diff --git a/src/components/dataset/overview/dataset-properties.vue b/src/components/dataset/overview/dataset-properties.vue
index 6c68bff81..064a5ad0f 100644
--- a/src/components/dataset/overview/dataset-properties.vue
+++ b/src/components/dataset/overview/dataset-properties.vue
@@ -26,7 +26,7 @@ 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>
@@ -34,7 +34,7 @@ except according to the terms contained in the LICENSE file.
         <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>
diff --git a/src/components/dataset/overview/linked-forms.vue b/src/components/dataset/overview/linked-forms.vue
index 7663273e4..2caca03e9 100644
--- a/src/components/dataset/overview/linked-forms.vue
+++ b/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>
diff --git a/src/components/dataset/row.vue b/src/components/dataset/row.vue
index 9eae5eabc..4ba968f75 100644
--- a/src/components/dataset/row.vue
+++ b/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>
diff --git a/src/components/dataset/summary/row.vue b/src/components/dataset/summary/row.vue
index 7ef5534cc..59b82c9b3 100644
--- a/src/components/dataset/summary/row.vue
+++ b/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>
diff --git a/src/components/date-time.vue b/src/components/date-time.vue
index 277c7d070..bad868202 100644
--- a/src/components/date-time.vue
+++ b/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;
     }
   },
diff --git a/src/components/enketo/fill.vue b/src/components/enketo/fill.vue
index 0c5e681c0..efe6945f3 100644
--- a/src/components/enketo/fill.vue
+++ b/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');
diff --git a/src/components/enketo/preview.vue b/src/components/enketo/preview.vue
index 0d8537cb9..2a7ea6e35 100644
--- a/src/components/enketo/preview.vue
+++ b/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');
diff --git a/src/components/field-key/row.vue b/src/components/field-key/row.vue
index 2ce42ad56..e98c60789 100644
--- a/src/components/field-key/row.vue
+++ b/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"/>
diff --git a/src/components/form-attachment/row.vue b/src/components/form-attachment/row.vue
index 5bb91ff1f..3abb251df 100644
--- a/src/components/form-attachment/row.vue
+++ b/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{
diff --git a/src/components/form-version/string.vue b/src/components/form-version/string.vue
index 588b8cc57..987273671 100644
--- a/src/components/form-version/string.vue
+++ b/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>
diff --git a/src/components/form/head.vue b/src/components/form/head.vue
index 5ec90079c..425da9b9c 100644
--- a/src/components/form/head.vue
+++ b/src/components/form/head.vue
@@ -21,7 +21,7 @@ except according to the terms contained in the LICENSE file.
           <!-- Using .col-xs-6 so that if the form name is long, it is not
           behind #form-head-draft-nav. -->
           <div class="col-xs-6">
-            <div v-if="form.dataExists" class="h1" :title="form.nameOrId">
+            <div v-if="form.dataExists" class="h1" v-tooltip.text>
               {{ form.nameOrId }}
             </div>
           </div>
@@ -33,34 +33,37 @@ except according to the terms contained in the LICENSE file.
               to render the tabs even if the form does not have a published
               version (in which case canRoute() will return `false`). -->
               <li v-if="rendersFormTabs" :class="formTabClass('')"
-                :title="formTabTitle" role="presentation">
-                <router-link :to="tabPath('')">
+                role="presentation">
+                <router-link :to="tabPath('')"
+                  v-tooltip.aria-describedby="formTabDescription">
                   {{ $t('common.tab.overview') }}
                 </router-link>
               </li>
               <!-- No v-if, because anyone who can navigate to the form should
               be able to navigate to .../versions and .../submissions. -->
-              <li :class="formTabClass('versions')" :title="formTabTitle"
-                role="presentation">
-                <router-link :to="tabPath('versions')">
+              <li :class="formTabClass('versions')" role="presentation">
+                <router-link :to="tabPath('versions')"
+                  v-tooltip.aria-describedby="formTabDescription">
                   {{ $t('formHead.tab.versions') }}
                 </router-link>
               </li>
-              <li :class="formTabClass('submissions')" :title="formTabTitle"
-                role="presentation">
-                <router-link :to="tabPath('submissions')">
+              <li :class="formTabClass('submissions')" role="presentation">
+                <router-link :to="tabPath('submissions')"
+                  v-tooltip.aria-describedby="formTabDescription">
                   {{ $t('resource.submissions') }}
                 </router-link>
               </li>
               <li v-if="rendersFormTabs" :class="formTabClass('public-links')"
-                :title="formTabTitle" role="presentation">
-                <router-link :to="tabPath('public-links')">
+                role="presentation">
+                <router-link :to="tabPath('public-links')"
+                  v-tooltip.aria-describedby="formTabDescription">
                   {{ $t('formHead.tab.publicAccess') }}
                 </router-link>
               </li>
               <li v-if="rendersFormTabs" :class="formTabClass('settings')"
-                :title="formTabTitle" role="presentation">
-                <router-link :to="tabPath('settings')">
+                role="presentation">
+                <router-link :to="tabPath('settings')"
+                  v-tooltip.aria-describedby="formTabDescription">
                   {{ $t('common.tab.settings') }}
                 </router-link>
               </li>
@@ -132,7 +135,7 @@ export default {
     rendersFormTabs() {
       return this.project.dataExists && this.project.permits(['form.update']);
     },
-    formTabTitle() {
+    formTabDescription() {
       return this.form.dataExists && this.form.publishedAt == null
         ? this.$t('formNav.tabTitle')
         : null;
diff --git a/src/components/form/row.vue b/src/components/form/row.vue
index a5c4d541d..57838704a 100644
--- a/src/components/form/row.vue
+++ b/src/components/form/row.vue
@@ -21,7 +21,7 @@ except according to the terms contained in the LICENSE file.
     <td v-for="reviewState of visibleReviewStates" :key="reviewState" class="review-state">
       <template v-if="form.publishedAt != null">
         <link-if-can :to="formPath(form.projectId, form.xmlFormId, `submissions?reviewState=${urlFilterEncode.get(reviewState)}`)"
-          :title="$t(`reviewState.${reviewState}`)">
+          v-tooltip.no-aria="$t(`reviewState.${reviewState}`)">
           <span>{{ $n(form.reviewStates[reviewState], 'default') }}</span>
           <span :class="reviewStateIcon(reviewState)"></span>
         </link-if-can>
@@ -30,7 +30,7 @@ except according to the terms contained in the LICENSE file.
 
     <template v-if="form.publishedAt != null">
       <td class="last-submission">
-        <span :title="lastSubmissionTooltip">
+        <span v-tooltip.no-aria="lastSubmissionTooltip">
           <template v-if="form.lastSubmission != null">
             <link-if-can :to="formPath(form.projectId, form.xmlFormId, `submissions`)">
               <date-time :iso="form.lastSubmission" relative="past"
@@ -43,7 +43,7 @@ except according to the terms contained in the LICENSE file.
       </td>
       <td class="total-submissions">
         <link-if-can :to="formPath(form.projectId, form.xmlFormId, `submissions`)"
-          :title="$t('common.totalSubmissions')">
+          v-tooltip.no-aria="$t('common.totalSubmissions')">
           <span>{{ $n(form.submissions, 'default') }}</span>
           <span class="icon-asterisk"></span>
         </link-if-can>
@@ -59,10 +59,11 @@ except according to the terms contained in the LICENSE file.
     <td v-if="showActions" class="actions">
       <template v-if="form.state !== 'closed'">
         <template v-if="form.state === 'closing'">
-          <span :title="$t('formClosingTip')">
-          <span class="icon-clock-o closing-icon"></span>
-          <span>{{ $t('formState.closing') }}</span>
+          <span aria-hidden="true" v-tooltip.sr-only>
+            <span class="icon-clock-o closing-icon"></span>
+            <span>{{ $t('formState.closing') }}</span>
           </span>
+          <span class="sr-only">{{ $t('formClosingTip') }}</span>
         </template>
         <template v-else-if="form.publishedAt != null">
           <enketo-preview v-if="project.permits('project.update')"
diff --git a/src/components/form/trash-row.vue b/src/components/form/trash-row.vue
index d00be2088..1bda81f8b 100644
--- a/src/components/form/trash-row.vue
+++ b/src/components/form/trash-row.vue
@@ -23,7 +23,7 @@ except according to the terms contained in the LICENSE file.
       </i18n-t>
     </td>
     <td class="last-submission">
-      <span :title="lastSubmissionTooltip">
+      <span v-tooltip.no-aria="lastSubmissionTooltip">
         <template v-if="form.lastSubmission != null">
           <date-time :iso="form.lastSubmission" relative="past"
             :tooltip="false"/>
@@ -33,7 +33,7 @@ except according to the terms contained in the LICENSE file.
       </span>
     </td>
     <td class="total-submissions">
-      <span :title="$t('common.totalSubmissions')">
+      <span v-tooltip.no-aria="$t('common.totalSubmissions')">
         <!-- form.submissions should always exist in production, but it doesn't
         exist in some tests. -->
         <span>{{ $n(form.submissions != null ? form.submissions : 0, 'default') }}</span>
@@ -42,7 +42,7 @@ except according to the terms contained in the LICENSE file.
     </td>
     <td class="actions">
       <button class="form-trash-row-restore-button btn btn-default" type="button"
-        :aria-disabled="disabled" :title="disabledTitle"
+        :aria-disabled="disabled" v-tooltip.aria-describedby="disabledDescription"
         :data-form-id="form.id"
         @click="openRestoreModal(form)">
         <span class="icon-recycle"></span>{{ $t('action.restore') }}
@@ -86,7 +86,7 @@ export default {
     disabled() {
       return this.activeFormIds.includes(this.form.xmlFormId);
     },
-    disabledTitle() {
+    disabledDescription() {
       if (this.disabled)
         return this.$t('disabled.conflict');
       return null;
diff --git a/src/components/multiselect.vue b/src/components/multiselect.vue
index 0308d355a..6d2aebdf3 100644
--- a/src/components/multiselect.vue
+++ b/src/components/multiselect.vue
@@ -20,7 +20,7 @@ except according to the terms contained in the LICENSE file.
       @keydown="toggleAfterEnter" @mousedown.prevent>
       <option value="">{{ selectOption }}</option>
     </select>
-    <span class="form-label">{{ label }}</span>
+    <span class="form-label" aria-hidden="true">{{ label }}</span>
     <!-- Specifying @click.stop so that clicking the .dropdown-menu does not
     hide it. -->
     <ul class="dropdown-menu" :aria-labelledby="toggleId" @click.stop>
@@ -49,13 +49,16 @@ except according to the terms contained in the LICENSE file.
           :class="{ 'shows-all': searchValue === '' }" @change="changeCheckbox">
           <template v-if="options != null">
             <!-- eslint-disable-next-line vue/object-curly-newline -->
-            <li v-for="({ value, key = value, text = value, title = text }, i) in options"
+            <li v-for="({ value, key = value, text = value, description }, i) in options"
               :key="key" :class="{ 'search-match': searchMatches.has(value) }">
               <div class="checkbox">
                 <label>
-                  <input type="checkbox" :data-index="i">
-                  <span :title="title">{{ text }}</span>
+                  <input type="checkbox" :data-index="i"
+                    :aria-describedby="description != null ? descriptionId(i) : null">
+                  <span v-if="description == null" v-tooltip.text>{{ text }}</span>
+                  <span v-else v-tooltip.no-aria="description">{{ text }}</span>
                 </label>
+                <p v-if="description != null" :id="descriptionId(i)" class="sr-only">{{ description }}</p>
               </div>
             </li>
           </template>
@@ -90,8 +93,8 @@ const props = defineProps({
       `key` property should be a function of `value`: for example, if `value`
       changes, then `key` should also change.
     - text. The text to show for the option. Defaults to the `value` property.
-    - title. The title to show for the option. This property can be used to
-      display additional text. Defaults to the `text` property.
+    - description (optional). Additional text to show for the option. This will
+      be shown in a tooltip and used as the ARIA description of the checkbox.
 
   If `options` is `null` (for example, because the options are loading), then
   the dropdown will not be shown.
@@ -144,6 +147,11 @@ const props = defineProps({
 });
 const emit = defineEmits(['update:modelValue']);
 
+const idPrefix = `multiselect${id}`;
+id += 1;
+const toggleId = `${idPrefix}-toggle`;
+const descriptionId = (i) => `${idPrefix}-description${i}`;
+
 const optionList = ref(null);
 
 
@@ -268,9 +276,9 @@ const { i18n } = inject('container');
 const textToSearch = computed(() => props.options.map(option => {
   const text = option.text != null ? option.text : option.value.toString();
   const result = [text.toLocaleLowerCase(i18n.locale)];
-  const { title } = option;
-  if (title != null && title !== text)
-    result.push(title.toLocaleLowerCase(i18n.locale));
+  const { description } = option;
+  if (description != null && description !== text)
+    result.push(description.toLocaleLowerCase(i18n.locale));
   return result;
 }));
 // We may need to add debouncing here at some point.
@@ -320,8 +328,6 @@ onMounted(() => {
 onUnmounted(() => { $dropdown.value.off('.bs.dropdown'); });
 
 const toggle = ref(null);
-const toggleId = `multiselect-toggle${id}`;
-id += 1;
 const $toggle = computed(() => $(toggle.value));
 const toggleAfterEnter = ({ key }) => {
   if (key === 'Enter') $toggle.value.dropdown('toggle');
diff --git a/src/components/project/form-access/row.vue b/src/components/project/form-access/row.vue
index a9cf08eec..59fbf32b4 100644
--- a/src/components/project/form-access/row.vue
+++ b/src/components/project/form-access/row.vue
@@ -13,10 +13,9 @@ except according to the terms contained in the LICENSE file.
   <tr :class="htmlClass">
     <template v-if="frozen">
       <td class="project-form-access-row-form-name">
-        <span v-if="form.publishedAt == null" class="icon-edit"
-          :title="$t('draftTitle')">
-        </span>
-        <router-link :to="primaryFormPath(form)" :title="form.nameOrId">{{ form.nameOrId }}</router-link>
+        <span v-if="form.publishedAt == null" class="icon-edit" v-tooltip.sr-only></span>
+        <router-link :to="primaryFormPath(form)" v-tooltip.text>{{ form.nameOrId }}</router-link>
+        <span v-if="form.publishedAt == null" class="sr-only">&nbsp;{{ $t('draftTitle') }}</span>
       </td>
       <td>
         <div class="form-group">
@@ -127,10 +126,7 @@ export default {
 .project-form-access-row-draft {
   background-color: rgba(0, 0, 0, 0.0225);
 
-  .icon-edit {
-    cursor: help;
-    margin-right: 9px;
-  }
+  .icon-edit { margin-right: 9px; }
 }
 </style>
 
diff --git a/src/components/project/form-access/table.vue b/src/components/project/form-access/table.vue
index fbcedd162..6b163551e 100644
--- a/src/components/project/form-access/table.vue
+++ b/src/components/project/form-access/table.vue
@@ -36,9 +36,8 @@ except according to the terms contained in the LICENSE file.
         <thead>
           <tr>
             <th><div>{{ $t('resource.appUsers') }}</div></th>
-            <th v-for="fieldKey of fieldKeys.withToken" :key="fieldKey.id"
-              :title="fieldKey.displayName">
-              <div>{{ fieldKey.displayName }}</div>
+            <th v-for="fieldKey of fieldKeys.withToken" :key="fieldKey.id">
+              <div><span v-tooltip.text>{{ fieldKey.displayName }}</span></div>
             </th>
             <th></th>
           </tr>
diff --git a/src/components/project/form-row.vue b/src/components/project/form-row.vue
index abd04ac3b..d172a0bf0 100644
--- a/src/components/project/form-row.vue
+++ b/src/components/project/form-row.vue
@@ -30,7 +30,7 @@ except according to the terms contained in the LICENSE file.
     </td>
     <template v-if="form.publishedAt != null">
       <td v-for="reviewState of visibleReviewStates" :key="reviewState" class="review-state">
-        <span :title="$t(`reviewState.${reviewState}`)">
+        <span v-tooltip.no-aria="$t(`reviewState.${reviewState}`)">
           <template v-if="canLinkToSubmissions">
             <router-link :to="submissionsPath[reviewState]">
               <span>{{ $n(form.reviewStates[reviewState], 'default') }}</span>
@@ -44,7 +44,7 @@ except according to the terms contained in the LICENSE file.
         </span>
       </td>
       <td class="last-submission">
-        <span :title="lastSubmissionTooltip">
+        <span v-tooltip.no-aria="lastSubmissionTooltip">
           <template v-if="form.lastSubmission != null">
             <template v-if="canLinkToSubmissions">
               <router-link :to="submissionsPath.all">
@@ -63,7 +63,7 @@ except according to the terms contained in the LICENSE file.
         </span>
       </td>
       <td class="total-submissions">
-        <span :title="$t('common.totalSubmissions')">
+        <span v-tooltip.no-aria="$t('common.totalSubmissions')">
           <template v-if="canLinkToSubmissions">
             <router-link :to="submissionsPath.all">
               <span>{{ $n(form.submissions, 'default') }}</span>
diff --git a/src/components/project/home-block.vue b/src/components/project/home-block.vue
index 001cf1092..4eced885a 100644
--- a/src/components/project/home-block.vue
+++ b/src/components/project/home-block.vue
@@ -13,11 +13,13 @@ except according to the terms contained in the LICENSE file.
   <div class="project-home-block">
     <div class="title">
       <router-link :to="projectPath(project.id)">{{ project.name }}</router-link>
-      <span v-if="project.keyId" class="encrypted badge"
-        :title="$t('encryptionTip')">
-        <span class="icon-lock"></span>
-        {{ $t('encrypted') }}
+      <template v-if="project.keyId">
+        <span class="encrypted badge" aria-hidden="true" v-tooltip.sr-only>
+          <span class="icon-lock"></span>
+          {{ $t('encrypted') }}
         </span>
+        <span class="sr-only">{{ $t('encryptionTip') }}</span>
+      </template>
     </div>
     <table v-if="visibleForms.length > 0" class="project-form-table table">
       <project-form-row v-for="form of visibleForms" :key="form.xmlFormId" :form="form" :project="project"/>
diff --git a/src/components/project/user/row.vue b/src/components/project/user/row.vue
index c5aceb4c7..9a75d2950 100644
--- a/src/components/project/user/row.vue
+++ b/src/components/project/user/row.vue
@@ -12,17 +12,15 @@ except according to the terms contained in the LICENSE file.
 <template>
   <tr>
     <td class="display-name">
-      <span :title="assignment.actor.displayName">
-        {{ assignment.actor.displayName }}
-      </span>
+      <span v-tooltip.text>{{ assignment.actor.displayName }}</span>
     </td>
     <td>
       <form>
         <div class="form-group">
           <select class="form-control" :value="selectedRoleId"
-            :aria-disabled="disabled || awaitingResponse"
-            :title="disabled ? $t('cannotAssignRole') : null"
             :aria-label="$t('field.projectRole')"
+            :aria-disabled="disabled || awaitingResponse"
+            v-tooltip.aria-describedby="disabled ? $t('cannotAssignRole') : null"
             @change="change($event.target.value)">
             <option v-for="role of roles.projectRoles" :key="role.id"
               :value="role.id.toString()">
diff --git a/src/components/public-link/row.vue b/src/components/public-link/row.vue
index aca14442e..2323f979d 100644
--- a/src/components/public-link/row.vue
+++ b/src/components/public-link/row.vue
@@ -12,7 +12,7 @@ except according to the terms contained in the LICENSE file.
 <template>
   <tr :class="htmlClass">
     <td class="display-name">
-      <span :title="publicLink.displayName">{{ publicLink.displayName }}</span>
+      <span v-tooltip.text>{{ publicLink.displayName }}</span>
     </td>
     <td class="once">
       {{ publicLink.once ? $t('common.yes') : $t('common.no') }}
@@ -21,10 +21,13 @@ except according to the terms contained in the LICENSE file.
       <template v-if="publicLink.token == null">{{ $t('revoked') }}</template>
       <template v-else-if="form.dataExists">
         <selectable v-if="enketoId != null">{{ url }}</selectable>
-        <span v-else class="unavailable" :title="$t('unavailable.title')">
-          <span>{{ $t('unavailable.text') }}</span>
-          <span class="icon-question-circle"></span>
-        </span>
+        <template v-else>
+          <span class="unavailable" aria-hidden="true" v-tooltip.sr-only>
+            <span>{{ $t('unavailable.text') }}</span>
+            <span class="icon-question-circle"></span>
+          </span>
+          <span class="sr-only">{{ $t('unavailable.title') }}</span>
+        </template>
       </template>
     </td>
     <td>
@@ -78,16 +81,11 @@ export default {
 </script>
 
 <style lang="scss">
+@import '../../assets/scss/mixins';
+
 .public-link-row {
   .table tbody & td { vertical-align: middle; }
-
-  .display-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .unavailable { cursor: help; }
+  .display-name { @include text-overflow-ellipsis; }
   .icon-question-circle { margin-left: 5px; }
 }
 </style>
diff --git a/src/components/submission/activity.vue b/src/components/submission/activity.vue
index 100914832..68be7bb9d 100644
--- a/src/components/submission/activity.vue
+++ b/src/components/submission/activity.vue
@@ -27,7 +27,7 @@ except according to the terms contained in the LICENSE file.
           </a>
           <button v-else id="submission-activity-edit-button" type="button"
             class="btn btn-default" aria-disabled="true"
-            :title="$t('submission.editDisabled')">
+            v-tooltip.aria-describedby="$t('submission.editDisabled')">
             <span class="icon-pencil"></span>{{ $t('action.edit') }}
           </button>
         </template>
diff --git a/src/components/submission/basic-details.vue b/src/components/submission/basic-details.vue
index 9ac107d57..cb5b2f4be 100644
--- a/src/components/submission/basic-details.vue
+++ b/src/components/submission/basic-details.vue
@@ -17,12 +17,12 @@ except according to the terms contained in the LICENSE file.
       <dl v-if="dataExists">
         <div>
           <dt>{{ $t('header.instanceId') }}</dt>
-          <dd><span :title="submission.__id">{{ submission.__id }}</span></dd>
+          <dd><span v-tooltip.text>{{ submission.__id }}</span></dd>
         </div>
         <div>
           <dt>{{ $t('header.submitterName') }}</dt>
           <dd>
-            <span :title="submission.__system.submitterName">{{ submission.__system.submitterName }}</span>
+            <span v-tooltip.text>{{ submission.__system.submitterName }}</span>
           </dd>
         </div>
         <div>
@@ -45,13 +45,13 @@ except according to the terms contained in the LICENSE file.
         <div v-if="submission.__system.deviceId != null">
           <dt>{{ $t('deviceId') }}</dt>
           <dd>
-            <span :title="submission.__system.deviceId">{{ submission.__system.deviceId }}</span>
+            <span v-tooltip.text>{{ submission.__system.deviceId }}</span>
           </dd>
         </div>
         <div v-if="submissionVersion.userAgent != null">
           <dt>{{ $t('userAgent') }}</dt>
           <dd id="submission-basic-details-user-agent">
-            <span :title="submissionVersion.userAgent">{{ submissionVersion.userAgent }}</span>
+            {{ submissionVersion.userAgent }}
           </dd>
         </div>
         <div v-if="submission.__system.attachmentsExpected !== 0">
diff --git a/src/components/submission/data-access.vue b/src/components/submission/data-access.vue
index 9c86f2714..14f47bb02 100644
--- a/src/components/submission/data-access.vue
+++ b/src/components/submission/data-access.vue
@@ -18,7 +18,7 @@ except according to the terms contained in the LICENSE file.
     </a>
     <button id="submission-data-access-analyze-button" type="button"
       class="btn btn-default" :aria-disabled="analyzeDisabled"
-      :title="analyzeDisabled ? $t('analyzeDisabled') : null"
+      v-tooltip.aria-describedby="analyzeDisabled ? $t('analyzeDisabled') : null"
       @click="$emit('analyze')">
       <span class="icon-bar-chart"></span>{{ $t('action.analyze') }}&hellip;
     </button>
diff --git a/src/components/submission/data-row.vue b/src/components/submission/data-row.vue
index b68c6f8f0..6c54ecc12 100644
--- a/src/components/submission/data-row.vue
+++ b/src/components/submission/data-row.vue
@@ -12,16 +12,17 @@ except according to the terms contained in the LICENSE file.
 <template>
   <tr :class="htmlClass">
     <template v-if="submission.__system.status == null">
-      <td v-for="field of fields" :key="field.path" :class="fieldClass(field)"
-        :title="field.binary !== true ? formattedValue(submission, field) : null">
+      <td v-for="field of fields" :key="field.path" :class="fieldClass(field)">
         <template v-if="field.binary === true">
-          <!-- eslint-disable-next-line vuejs-accessibility/anchor-has-content -->
           <a v-if="rawValue(submission, field) != null" class="binary-link"
             :href="formattedValue(submission, field)" target="_blank"
-            :title="$t('submission.binaryLinkTitle')">
+            :aria-label="$t('submission.binaryLinkTitle')" v-tooltip.aria-label>
             <span class="icon-check"></span> <span class="icon-download"></span>
           </a>
         </template>
+        <template v-else-if="needsTooltip(field.type)">
+          <span v-tooltip.text>{{ formattedValue(submission, field) }}</span>
+        </template>
         <template v-else>{{ formattedValue(submission, field) }}</template>
       </td>
     </template>
@@ -32,7 +33,7 @@ except according to the terms contained in the LICENSE file.
         <span class="encryption-overlay"></span>
       </td>
     </template>
-    <td :title="submission.__id">{{ submission.__id }}</td>
+    <td>{{ submission.__id }}</td>
   </tr>
 </template>
 
@@ -54,6 +55,8 @@ everything is done in this component. We also used to have an i18n custom block,
 but that again was significantly slower.
 */
 
+const typesWithoutTooltips = ['int', 'decimal', 'date', 'time', 'dateTime', 'geopoint'];
+
 export default {
   name: 'SubmissionDataRow',
   props: {
@@ -162,6 +165,9 @@ export default {
         default:
           return rawValue;
       }
+    },
+    needsTooltip(type) {
+      return !typesWithoutTooltips.includes(type);
     }
   }
 };
diff --git a/src/components/submission/decrypt.vue b/src/components/submission/decrypt.vue
index 87254ca6f..7c827a5a9 100644
--- a/src/components/submission/decrypt.vue
+++ b/src/components/submission/decrypt.vue
@@ -21,12 +21,18 @@ except according to the terms contained in the LICENSE file.
             {{ $t('exportOptions') }}
           </p>
           <div class="checkbox"
-            :class="{ disabled: splitSelectMultiplesTitle != null }">
-            <label :title="splitSelectMultiplesTitle">
+            :class="{ disabled: splitSelectMultiplesDescription != null }">
+            <label v-tooltip.sr-only>
               <input v-model="splitSelectMultiples" type="checkbox"
-                :disabled="splitSelectMultiplesTitle != null">
+                :disabled="splitSelectMultiplesDescription != null"
+                :aria-describedby="splitSelectMultiplesDescribedBy">
               {{ $t('field.splitSelectMultiples') }}
             </label>
+            <p v-if="splitSelectMultiplesDescription != null"
+              id="submission-download-split-select-multiples-disabled"
+              class="sr-only">
+              {{ splitSelectMultiplesDescription }}
+            </p>
           </div>
           <div class="checkbox">
             <label>
@@ -34,14 +40,17 @@ except according to the terms contained in the LICENSE file.
               {{ $t('field.removeGroupNames') }}
             </label>
           </div>
-          <div class="checkbox"
-            :class="{ disabled: deletedFieldsTitle != null }">
-            <label :title="deletedFieldsTitle">
+          <div class="checkbox" :class="{ disabled: deletedFieldsDisabled }">
+            <label v-tooltip.sr-only>
               <input v-model="deletedFields" type="checkbox"
-                :disabled="deletedFieldsTitle != null"
-                aria-describedby="submission-download-deleted-fields-help">
+                :disabled="deletedFieldsDisabled"
+                :aria-describedby="deletedFieldsDescribedBy">
               {{ $t('field.deletedFields') }}
             </label>
+            <p v-if="deletedFieldsDisabled"
+              id="submission-download-deleted-fields-disabled" class="sr-only">
+              {{ $t('deletedFieldsDisabledForDraft') }}
+            </p>
             <p id="submission-download-deleted-fields-help" class="help-block">
               {{ $t('deletedFieldsHelp') }}
             </p>
@@ -74,14 +83,13 @@ except according to the terms contained in the LICENSE file.
           </div>
           <div class="submission-download-action"
             :class="{ disabled: noRepeat }">
-            <span class="submission-download-action-label"
-              :title="noRepeat ? $t('noRepeat') : null">
+            <span class="submission-download-action-label">
               <span class="icon-files-o"></span>{{ $t('action.download.allTables') }}
             </span>
             <div>
               <a :href="href('.csv.zip', { attachments: false })"
                 class="btn btn-primary" :class="{ disabled: noRepeat }"
-                :title="noRepeat ? $t('noRepeat') : null">
+                v-tooltip.aria-describedby="noRepeat ? $t('noRepeat') : null">
                 <span class="icon-download"></span>.zip
               </a>
             </div>
@@ -148,7 +156,7 @@ export default {
     managedKey() {
       return this.keys.dataExists ? this.keys.find(key => key.managed) : null;
     },
-    splitSelectMultiplesTitle() {
+    splitSelectMultiplesDescription() {
       if (this.fields.dataExists &&
         !this.fields.some(({ selectMultiple }) => selectMultiple === true))
         return this.$t('noSelectMultiple');
@@ -156,11 +164,20 @@ export default {
         ? this.$t('encryptedForm')
         : null;
     },
-    deletedFieldsTitle() {
-      return this.formVersion.dataExists && this.formVersion.publishedAt == null
-        ? this.$t('deletedFieldsDisabledForDraft')
+    splitSelectMultiplesDescribedBy() {
+      return this.splitSelectMultiplesDescription != null
+        ? 'submission-download-split-select-multiples-disabled'
         : null;
     },
+    deletedFieldsDisabled() {
+      return this.formVersion.dataExists && this.formVersion.publishedAt == null;
+    },
+    deletedFieldsDescribedBy() {
+      const ids = ['submission-download-deleted-fields-help'];
+      if (this.deletedFieldsDisabled)
+        ids.push(['submission-download-deleted-fields-disabled']);
+      return ids.join(' ');
+    },
     noRepeat() {
       return this.fields.dataExists &&
         !this.fields.some(({ type }) => type === 'repeat');
diff --git a/src/components/submission/diff-item.vue b/src/components/submission/diff-item.vue
index 7c2c4af6f..6a6af2eaa 100644
--- a/src/components/submission/diff-item.vue
+++ b/src/components/submission/diff-item.vue
@@ -27,11 +27,11 @@ except according to the terms contained in the LICENSE file.
     </div>
     <div class="diff-details">
       <template v-if="isAtomicChange">
-        <div class="field-name" :title="fieldName">
+        <div class="field-name" v-tooltip.text>
           {{ fieldName }}
         </div>
         <div class="old-to-new">
-          <span v-if="entry.old" class="data-old" :title="entry.old">
+          <span v-if="entry.old" class="data-old" v-tooltip.text>
             <template v-if="isBinary">
               <a :href="binaryHref(entry.old, true)">{{ entry.old }}</a>
             </template>
@@ -39,7 +39,7 @@ except according to the terms contained in the LICENSE file.
           </span>
           <span v-else class="data-empty">{{ $t('empty') }}</span>
           <span class="icon-arrow-circle-right"></span>
-          <span v-if="entry.new" class="data-new" :title="entry.new">
+          <span v-if="entry.new" class="data-new" v-tooltip.text>
             <template v-if="isBinary">
               <a :href="binaryHref(entry.new, false)">{{ entry.new }}</a>
             </template>
diff --git a/src/components/submission/feed-entry.vue b/src/components/submission/feed-entry.vue
index ff259fc9f..c2026f4c3 100644
--- a/src/components/submission/feed-entry.vue
+++ b/src/components/submission/feed-entry.vue
@@ -41,7 +41,7 @@ except according to the terms contained in the LICENSE file.
         <template v-else-if="entry.action === 'entity.create.error'">
           <span class="icon-warning entity-icon submission-feed-entry-icon"></span>
           <span class="submission-feed-entry-entity-error">{{ $t('title.entity.error') }}</span>
-          <span class="entity-error-message" :title="entityProblem(entry)">{{ entityProblem(entry) }}</span>
+          <span class="entity-error-message" v-tooltip.text>{{ entityProblem(entry) }}</span>
         </template>
         <template v-else>
           <span class="icon-comment submission-feed-entry-icon"></span>
diff --git a/src/components/submission/field-dropdown.vue b/src/components/submission/field-dropdown.vue
index 8b0a7fdfa..5508c3b22 100644
--- a/src/components/submission/field-dropdown.vue
+++ b/src/components/submission/field-dropdown.vue
@@ -50,7 +50,7 @@ const options = computed(() => fields.selectable.map(field => ({
   value: field,
   key: field.path,
   text: field.name,
-  title: field.header
+  description: field.header
 })));
 const { t } = useI18n();
 const placeholder = (counts) => t('placeholder', counts);
diff --git a/src/components/submission/metadata-row.vue b/src/components/submission/metadata-row.vue
index 538024625..52dd32b65 100644
--- a/src/components/submission/metadata-row.vue
+++ b/src/components/submission/metadata-row.vue
@@ -15,9 +15,8 @@ except according to the terms contained in the LICENSE file.
     binding. -->
 
     <td class="row-number">{{ $n(rowNumber, 'noGrouping') }}</td>
-    <td v-if="!draft" class="submitter-name"
-      :title="submission.__system.submitterName">
-      {{ submission.__system.submitterName }}
+    <td v-if="!draft" class="submitter-name">
+      <span v-tooltip.text>{{ submission.__system.submitterName }}</span>
     </td>
     <td><date-time :iso="submission.__system.submissionDate"/></td>
     <td v-if="!draft" class="state-and-actions">
@@ -30,16 +29,17 @@ except according to the terms contained in the LICENSE file.
       <div class="btn-group">
         <template v-if="canUpdate">
           <button type="button" class="review-button btn btn-default"
-            :title="$t('action.review')">
+            :aria-label="$t('action.review')" v-tooltip.aria-label>
             <span class="icon-check"></span>
           </button>
-          <!-- eslint-disable-next-line vuejs-accessibility/anchor-has-content -->
           <a v-if="submission.__system.status == null" class="btn btn-default"
-            :href="editPath" target="_blank" :title="editTitle">
+            :href="editPath" target="_blank" :aria-label="editLabel"
+            v-tooltip.aria-label>
             <span class="icon-pencil"></span>
           </a>
-          <button v-else type="button" class="btn btn-default" aria-disabled="true"
-            :title="$t('submission.editDisabled')">
+          <button v-else type="button" class="btn btn-default"
+            :aria-label="editLabel" aria-disabled="true"
+            v-tooltip.aria-describedby="$t('submission.editDisabled')">
             <span class="icon-pencil"></span>
           </button>
         </template>
@@ -110,7 +110,7 @@ export default {
         this.submission.__id
       );
     },
-    editTitle() {
+    editLabel() {
       return this.$t('submission.action.edit', {
         count: this.$n(this.submission.__system.edits, 'default')
       });
diff --git a/src/components/submission/table.vue b/src/components/submission/table.vue
index 1d16e31da..70262f1ab 100644
--- a/src/components/submission/table.vue
+++ b/src/components/submission/table.vue
@@ -38,10 +38,8 @@ except according to the terms contained in the LICENSE file.
       <table id="submission-table-data" class="table">
         <thead>
           <tr v-if="fields != null">
-            <!-- Adding a title attribute in case the column header is so long
-            that it is truncated. -->
-            <th v-for="field of fields" :key="field.path" :title="field.header">
-              {{ field.header }}
+            <th v-for="field of fields" :key="field.path">
+              <span v-tooltip.text>{{ field.header }}</span>
             </th>
             <th>{{ $t('header.instanceId') }}</th>
           </tr>
diff --git a/src/components/time-and-user.vue b/src/components/time-and-user.vue
index 9524a14f9..887c6d12e 100644
--- a/src/components/time-and-user.vue
+++ b/src/components/time-and-user.vue
@@ -17,7 +17,7 @@ except according to the terms contained in the LICENSE file.
       <date-time :iso="iso"/>
     </template>
     <template #displayName>
-      <link-if-can :to="userPath(user.id)" :title="user.displayName">{{ user.displayName }}</link-if-can>
+      <link-if-can :to="userPath(user.id)" v-tooltip.text>{{ user.displayName }}</link-if-can>
     </template>
   </i18n-t>
   <div v-else>
diff --git a/src/components/user/row.vue b/src/components/user/row.vue
index de9fcb56a..aa54c4ce7 100644
--- a/src/components/user/row.vue
+++ b/src/components/user/row.vue
@@ -12,16 +12,16 @@ except according to the terms contained in the LICENSE file.
 <template>
   <tr class="user-row" :class="{ success: user.id === highlighted }">
     <td class="display-name">
-      <router-link :to="userPath(user.id)" :title="user.displayName">{{ user.displayName }}</router-link>
+      <router-link :to="userPath(user.id)" v-tooltip.text>{{ user.displayName }}</router-link>
     </td>
-    <td class="email" :title="user.email">{{ user.email }}</td>
+    <td class="email"><span v-tooltip.text>{{ user.email }}</span></td>
     <td class="user-role">
       <form>
         <div class="form-group">
           <select class="form-control" :value="selectedRole"
-            :aria-disabled="disabled || awaitingResponse"
-            :title="disabled ? $t('cannotAssignRole') : null"
             :aria-label="$t('field.sitewideRole')"
+            :aria-disabled="disabled || awaitingResponse"
+            v-tooltip.aria-describedby="disabled ? $t('cannotAssignRole') : null"
             @change="assignRole($event.target.value)">
             <option value="admin">{{ $t('role.admin') }}</option>
             <option value="">{{ $t('role.none') }}</option>
@@ -52,8 +52,9 @@ except according to the terms contained in the LICENSE file.
               {{ $t('action.resetPassword') }}&hellip;
             </a>
           </li>
-          <li :class="{ disabled }" :title="disabled ? $t('cannotRetire') : null">
+          <li :class="{ disabled }">
             <a class="retire-user" href="#"
+              v-tooltip.aria-describedby="disabled ? $t('cannotRetire') : null"
               @click.prevent="$emit('retire', user)">
               {{ $t('action.retire') }}&hellip;
             </a>
diff --git a/src/directives/tooltip.js b/src/directives/tooltip.js
new file mode 100644
index 000000000..f46841ce0
--- /dev/null
+++ b/src/directives/tooltip.js
@@ -0,0 +1,339 @@
+/*
+Copyright 2023 ODK Central Developers
+See the NOTICE file at the top-level directory of this distribution and at
+https://github.com/getodk/central-frontend/blob/master/NOTICE.
+
+This file is part of ODK Central. It is subject to the license terms in
+the LICENSE file found in the top-level directory of this distribution and at
+https://www.apache.org/licenses/LICENSE-2.0. No part of ODK Central,
+including this file, may be copied, modified, propagated, or distributed
+except according to the terms contained in the LICENSE file.
+*/
+
+/*
+Use the v-tooltip directive to add a tooltip to an element. The tooltip will be
+shown when the user hovers over the element or focuses it.
+
+There are a few ways to specify the text of a tooltip. In many cases, the text
+will be copied from some place where it already exists in the DOM. You can
+choose one of the following:
+
+v-tooltip.text
+v-tooltip.aria-describedby="someValue"
+v-tooltip.aria-label
+v-tooltip.sr-only
+v-tooltip.no-aria="someValue"
+
+If the text of an element may overflow and be truncated, specify v-tooltip.text.
+This will show a tooltip with the text of the element, but only if the text is
+truncated. The text must be inside an element that sets the text-overflow CSS
+property: either the element with the tooltip or (more likely) an ancestor
+element.
+
+If an element is disabled, it will often have a tooltip that explains why. In
+this case, we will also make the explanation available to screen readers using
+the aria-describedby attribute. Specify v-tooltip.aria-describedby="someValue".
+Doing so will render the tooltip immediately and link to it using
+aria-describedby, but will keep it hidden until hover or focus.
+
+Some buttons and links only show an icon. In those cases, we provide text to
+screen readers using the aria-label attribute. To also show that text in a
+tooltip, specify v-tooltip.aria-label. Here, the text is passed to the
+aria-label attribute, not directly to v-tooltip. For example:
+
+  <button :aria-label="someValue" v-tooltip.aria-label ...>
+
+This is different from v-tooltip.aria-describedby, to which the text is passed
+directly. We do it that way with v-tooltip.aria-describedby because the
+aria-describedby attribute is not independently available in the DOM: the
+attribute can only link to the tooltip once the tooltip has been rendered.
+
+Some icons and other static elements are associated with additional text.
+Because aria-describedby and aria-label don't work as well with static elements,
+we usually place the additional text in its own element. That element will have
+the sr-only HTML class, which will hide the text off-screen while making it
+available to screen readers. To show the text of the .sr-only element as a
+tooltip on the first element (for example, on an icon), specify
+v-tooltip.sr-only. When the user hovers over or focuses the first element, the
+text of the .sr-only element will be shown in a tooltip.
+
+In rare cases, it may be that a particular tooltip does not work within any of
+the patterns above. For example, some text may be shown in a tooltip over a
+static element, then also made available on a nearby interactive element using
+an aria-describedby attribute. In cases like that, specify
+v-tooltip.no-aria="someValue". Doing so will pass the text to v-tooltip without
+connecting the text to an attribute or element available to screen readers.
+v-tooltip.no-aria should only be needed in rare cases and is intended as an
+escape hatch.
+
+If a value is passed directly to v-tooltip, using either
+v-tooltip.aria-describedby or v-tooltip.no-aria, it will be ignored if it is
+`null` or `undefined`: a tooltip will not be shown.
+
+In testing, use .should.textTooltip() to test v-tooltip.text. Use
+.should.tooltip() to test other uses of v-tooltip. In both cases, the assertion
+is asynchronous, so you must use `await`. For example:
+
+  await component.should.have.tooltip('Some text');
+*/
+
+import { computePosition, detectOverflow, flip, inline, offset } from '@floating-ui/dom';
+
+import { noop } from '../util/util';
+
+const types = ['text', 'aria-describedby', 'aria-label', 'sr-only', 'no-aria'];
+const placements = ['top', 'right', 'bottom', 'left'];
+const tooltips = new Map();
+let id = 1;
+
+// This Floating UI middleware is needed to horizontally center a v-tooltip.text
+// tooltip above or below its anchor element.
+const detectTextOverflow = {
+  name: 'detectTextOverflow',
+  fn: async (middlewareArgs) => {
+    const { placement } = middlewareArgs;
+    if (!(placement === 'top' || placement === 'bottom')) return {};
+    const overflow = await detectOverflow(middlewareArgs, {
+      elementContext: 'reference'
+    });
+    return {
+      // Accounting for both overflow.right and overflow.left with the thought
+      // that we will likely support RTL text in the future.
+      x: middlewareArgs.x -
+        (overflow.right > 0 ? overflow.right / 2 : 0) +
+        (overflow.left > 0 ? overflow.left / 2 : 0)
+    };
+  }
+};
+
+const show = (event) => {
+  const tooltip = tooltips.get(event.target);
+  if (!tooltip.shown) tooltip.show();
+};
+const hide = (event) => {
+  const tooltip = tooltips.get(event.target);
+  if (tooltip.shown) tooltip.hide();
+};
+
+class Tooltip {
+  static maybeCreate(anchor, { modifiers, value }) {
+    const type = types.find(name => modifiers[name] === true);
+    if (type == null) {
+      // eslint-disable-next-line no-console
+      console.error('invalid tooltip', anchor);
+      return null;
+    }
+
+    const tooltip = new Tooltip(anchor, type, value);
+    /*
+    For v-tooltip.text, we check whether the text is more than 5 characters
+    rather than checking whether tooltip.text() != null because the element that
+    sets text-overflow might not be visible yet. In that case, clientWidth === 0
+    on that element, so tooltip.text() == null even if the text will be
+    truncated once the element is visible. Rather than trying to watch the
+    visibility of the element, we add event listeners if the text is more than 5
+    characters. If/when an event listener is triggered for show, we will
+    evaluate then whether the text is truncated and show the tooltip if so.
+    Presumably the text won't ever be truncated if it is 5 characters or fewer.
+    We check textContent here rather than innerText to avoid triggering a
+    reflow.
+
+    For v-tooltip.sr-only, we always add event listeners because we can't easily
+    hook into the lifecycle of the .sr-only element. If/when an event listener
+    is triggered for show, we will evaluate then whether there is an .sr-only
+    element and whether it has text and show the tooltip if so.
+
+    For other tooltip types, we can know right away whether a tooltip should be
+    shown: we just need to check tooltip.text().
+    */
+    if (type === 'text'
+      ? anchor.textContent.trim().length > 5
+      : type === 'sr-only' || tooltip.text() != null) {
+      tooltip.addEventListeners();
+      if (type === 'aria-describedby') tooltip.render();
+      tooltips.set(anchor, tooltip);
+      return tooltip;
+    }
+
+    return null;
+  }
+
+  constructor(anchor, type, value) {
+    this.anchor = anchor;
+    // I tried subclassing based on `type`, but it didn't end up working well:
+    // `type` is used in a wide variety of ways.
+    this.type = type;
+    this.value = value;
+    this.element = null;
+    this.shown = false;
+  }
+
+  _text() {
+    if (this.type === 'text') {
+      let closestBlock = this.anchor;
+      // clientWidth === 0 if the element is inline.
+      while (closestBlock.clientWidth === 0) {
+        closestBlock = closestBlock.parentNode;
+        // The `null` case is possible in testing, because many components are
+        // not attached to the document, in which case clientWidth is also 0.
+        // The document.body case shouldn't happen, but it seems like a good
+        // safeguard.
+        if (closestBlock == null || closestBlock === document.body) return null;
+      }
+      // Check whether the text is truncated.
+      return closestBlock.scrollWidth > closestBlock.clientWidth
+        ? this.anchor.innerText
+        : null;
+    }
+    if (this.type === 'aria-label')
+      return this.anchor.getAttribute('aria-label');
+    if (this.type === 'sr-only') {
+      for (let sibling = this.anchor.nextElementSibling; sibling != null;
+        sibling = sibling.nextElementSibling) {
+        if (sibling.classList.contains('sr-only')) return sibling.innerText;
+      }
+      return null;
+    }
+    return this.value != null ? this.value.toString() : null;
+  }
+
+  // Computes and returns the text to show for the tooltip.
+  text() {
+    const text = this._text();
+    if (text == null) return null;
+    const trim = text.trim();
+    return trim !== '' ? trim : null;
+  }
+
+  addEventListeners() {
+    this.anchor.addEventListener('mouseenter', show);
+    this.anchor.addEventListener('mouseleave', hide);
+    this.anchor.addEventListener('focus', show);
+    this.anchor.addEventListener('blur', hide);
+  }
+
+  removeEventListeners() {
+    this.anchor.removeEventListener('mouseenter', show);
+    this.anchor.removeEventListener('mouseleave', hide);
+    this.anchor.removeEventListener('focus', show);
+    this.anchor.removeEventListener('blur', hide);
+  }
+
+  // Inserts the tooltip into the DOM.
+  render() {
+    const template = document.createElement('template');
+    template.innerHTML = '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>';
+    // eslint-disable-next-line prefer-destructuring
+    this.element = template.content.children[0];
+    this.element.id = `tooltip${id}`;
+    id += 1;
+    this.element.querySelector('.tooltip-inner').textContent = this.text();
+    // #tooltips will exist in production, but it won't exist in all tests.
+    const parent = document.getElementById('tooltips') ?? document.body;
+    parent.append(this.element);
+    if (this.type === 'aria-describedby')
+      this.anchor.setAttribute('aria-describedby', this.element.id);
+  }
+
+  position() {
+    const initialPlacement = 'top';
+    const middleware = [
+      offset(9),
+      inline(),
+      flip({ fallbackPlacements: ['bottom', 'left', 'right'] })
+    ];
+    if (this.type === 'text') middleware.push(detectTextOverflow);
+    return computePosition(this.anchor, this.element, {
+      placement: initialPlacement,
+      middleware
+    })
+      .then(({ x, y, placement, strategy }) => {
+        const { style } = this.element;
+        style.top = `${y}px`;
+        style.left = `${x}px`;
+        this.element.classList.remove(...placements);
+        this.element.classList.add(placement);
+        style.position = strategy;
+      });
+  }
+
+  // Shows the tooltip if there is text to show, rendering the tooltip if it
+  // isn't rendered already.
+  show() {
+    if (this.element == null) {
+      if (this.text() == null) return;
+      this.render();
+    }
+
+    this.position()
+      .then(() => { this.element.classList.add('in', 'fade'); })
+      .catch(noop);
+    this.shown = true;
+  }
+
+  // Removes the tooltip from the DOM.
+  remove() {
+    this.element.remove();
+    this.element = null;
+    if (this.type === 'aria-describedby')
+      this.anchor.removeAttribute('aria-describedby');
+    this.shown = false;
+  }
+
+  // Hides the tooltip, possibly removing it altogether.
+  hide() {
+    if (this.type !== 'aria-describedby') {
+      this.remove();
+    } else {
+      const { classList, style } = this.element;
+      classList.remove('in', 'fade', ...placements);
+      style.top = '';
+      style.left = '';
+      style.position = '';
+      this.shown = false;
+    }
+  }
+
+  destroy() {
+    if (this.element != null) this.remove();
+    this.removeEventListeners();
+    tooltips.delete(this.anchor);
+  }
+
+  // Updates the Tooltip object and the DOM to reflect updates to the anchor
+  // element. Doing so may entail patching or removing the tooltip element, as
+  // well as patching the anchor element.
+  update(value) {
+    // Store the value for v-tooltip.aria-describedby and v-tooltip.no-aria. If
+    // the tooltip is rendered, the value will be used immediately. Otherwise,
+    // it will be used later if/when the tooltip is rendered.
+    this.value = value;
+
+    if (this.element != null) {
+      const text = this.text();
+      if (text != null) {
+        this.element.querySelector('.tooltip-inner').textContent = text;
+        if (this.shown) this.position().catch(noop);
+      } else if (this.type === 'sr-only') {
+        this.remove();
+      } else {
+        this.destroy();
+      }
+    }
+  }
+}
+
+export default {
+  mounted: Tooltip.maybeCreate,
+  updated: (anchor, binding) => {
+    const tooltip = tooltips.get(anchor);
+    if (tooltip != null)
+      tooltip.update(binding.value);
+    else
+      Tooltip.maybeCreate(anchor, binding);
+  },
+  beforeUnmount: (anchor) => {
+    const tooltip = tooltips.get(anchor);
+    if (tooltip != null) tooltip.destroy();
+  }
+};
diff --git a/src/main.js b/src/main.js
index 8626225d4..bff5590cb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,7 @@ import './styles';
 import App from './components/app.vue';
 
 import createContainer from './container';
+import vTooltip from './directives/tooltip';
 // ./jquery must be imported before any of Bootstrap's JavaScript plugins,
 // because the plugins require jQuery.
 import './jquery';
@@ -25,4 +26,5 @@ import './bootstrap';
 
 createApp(App)
   .use(createContainer())
+  .directive('tooltip', vTooltip)
   .mount('#app');
diff --git a/test/assertions.js b/test/assertions.js
index f1769a649..5c1b05961 100644
--- a/test/assertions.js
+++ b/test/assertions.js
@@ -1,8 +1,48 @@
 import should from 'should';
 
+import { wait } from './util/util';
+
 const unwrapElement = (elementOrWrapper) => (elementOrWrapper instanceof HTMLElement
   ? elementOrWrapper
   : elementOrWrapper.element);
+
+// Assertion.addSync() is like Assertion.add(), but the specified function can
+// be async.
+const { Assertion, AssertionError } = should;
+Assertion.addAsync = (name, f) => {
+  // Add a simple synchronous version of the assertion in order to surface
+  // this.params and `name` if the assertion fails.
+  const syncName = `${name}_`;
+  // eslint-disable-next-line func-names
+  Assertion.add(syncName, function(params, error = undefined) {
+    if (params != null) this.params = params;
+    if (error != null) throw error;
+  });
+
+  // eslint-disable-next-line func-names
+  Assertion.prototype[name] = async function(...args) {
+    // We will pass `context` to f() rather than `this` so that f() doesn't
+    // mutate `this`.
+    const context = { obj: this.obj };
+    try {
+      should.exist(this.obj);
+      await f.apply(context, args);
+    } catch (error) {
+      if (!(error instanceof AssertionError)) throw error;
+      if (this.negate) return this;
+      // There has been an unexpected AssertionError, so the function will
+      // return a rejected promise. Rather than re-throwing the AssertionError,
+      // we pass the error to the synchronous version of the assertion above.
+      this.obj.should[syncName](context.params, error);
+    }
+    if (this.negate) this.obj.should.not[syncName](context.params);
+    return this;
+  };
+  // Name the function according to the specified name, since the function's
+  // name will be shown in the stack trace.
+  Object.defineProperty(Assertion.prototype[name], 'name', { value: name });
+};
+
 const verifyAttached = (elementOrWrapper) => {
   if (!document.body.contains(unwrapElement(elementOrWrapper)))
     throw new Error('component must be attached to the body');
@@ -11,7 +51,7 @@ const verifyAttached = (elementOrWrapper) => {
 // Asserts that an element is not individually hidden and that all its ancestors
 // are also not hidden. To test style-based visibility, attach the component to
 // the document, and specify `true` for `computed`.
-should.Assertion.add('visible', function visible(computed = false) {
+Assertion.add('visible', function visible(computed = false) {
   this.params = { operator: 'to be visible' };
   if (computed) verifyAttached(this.obj);
   let element = unwrapElement(this.obj);
@@ -25,7 +65,7 @@ should.Assertion.add('visible', function visible(computed = false) {
 // Asserts that an element is individually hidden. To test style-based
 // visibility, attach the component to the document, and specify `true` for
 // `computed`.
-should.Assertion.add('hidden', function hidden(computed = false) {
+Assertion.add('hidden', function hidden(computed = false) {
   this.params = { operator: 'to be hidden' };
   if (computed) verifyAttached(this.obj);
   const element = unwrapElement(this.obj);
@@ -35,13 +75,155 @@ should.Assertion.add('hidden', function hidden(computed = false) {
 
 // If a test does not attach the component to the document, then uses this
 // assertion, it may time out rather than fail. (I am not sure why.)
-should.Assertion.add('focused', function focused() {
+Assertion.add('focused', function focused() {
   this.params = { operator: 'to be focused' };
   verifyAttached(this.obj);
   unwrapElement(this.obj).should.equal(document.activeElement);
 });
 
-should.Assertion.add('alert', function assertAlert(type = undefined, message = undefined) {
+Assertion.add('ariaDescription', function ariaDescription(description = undefined) {
+  this.params = { operator: 'to be described by one element' };
+  const element = unwrapElement(this.obj);
+  const describedBy = element.getAttribute('aria-describedby');
+  should.exist(describedBy);
+  const ids = describedBy.split(' ');
+  ids.length.should.equal(1);
+  const id = ids[0];
+  // Some components will not be attached to the body, yet will still end up
+  // inserting elements into the DOM. (That happens with v-tooltip, for
+  // example.) That's why we fall back to document.getElementById().
+  const describer = element.getRootNode().querySelector(`#${id}`) ??
+    document.getElementById(id);
+  should.exist(describer);
+  const text = describer.textContent.trim();
+  if (description != null)
+    text.should.match(description);
+  else
+    text.should.not.equal('');
+});
+
+Assertion.add('ariaDescriptions', function ariaDescriptions(descriptions = undefined) {
+  this.params = { operator: 'to be described by multiple elements' };
+  const element = unwrapElement(this.obj);
+  const describedBy = element.getAttribute('aria-describedby');
+  should.exist(describedBy);
+  const ids = describedBy.split(' ');
+  ids.length.should.be.above(1);
+  const text = ids.map(id => {
+    // See above for why we fall back to document.getElementById().
+    const describer = element.getRootNode().querySelector(`#${id}`) ??
+      document.getElementById(id);
+    should.exist(describer);
+    return describer.textContent.trim();
+  });
+  if (descriptions != null) {
+    text.length.should.equal(descriptions.length);
+    for (let i = 0; i < text.length; i += 1)
+      text[i].should.match(descriptions[i]);
+  } else {
+    for (const s of text) s.should.not.equal('');
+  }
+});
+
+// Asserts that an element shows a tooltip on mouseenter and hides it on
+// mouseleave. If `text` is specified, asserts that the text of the tooltip
+// matches `text`.
+Assertion.addAsync('tooltip', async function tooltip(text = undefined) {
+  this.params = { operator: 'to have a tooltip' };
+  document.querySelectorAll('.tooltip.in').length.should.equal(0);
+  const element = unwrapElement(this.obj);
+  element.dispatchEvent(new MouseEvent('mouseenter'));
+  await wait();
+  const tooltips = document.querySelectorAll('.tooltip.in');
+  tooltips.length.should.equal(1);
+  const actualText = tooltips[0].textContent.trim();
+  if (text != null)
+    actualText.should.match(text);
+  else
+    actualText.should.not.equal('');
+  element.dispatchEvent(new MouseEvent('mouseleave'));
+  document.querySelectorAll('.tooltip.in').length.should.equal(0);
+});
+
+/* Asserts that an element shows the entirety of its text in a tooltip if and
+only if its text is truncated. The assertion works by replacing the text with a
+long string, checking that that shows a tooltip, then replacing the text with a
+short string and checking that that does not show a tooltip. If the element does
+not truncate its text (by setting text-overflow) and does not have an ancestor
+that truncates its text, the assertion will try to insert a new ancestor into
+the tree to truncate its text. In other words, the assertion does not test that
+the element has truncated text, only that if it has truncated text, it will show
+that text in a tooltip. */
+Assertion.addAsync('textTooltip', async function textTooltip() {
+  this.params = { operator: 'to show a tooltip if its text overflows' };
+
+  const element = unwrapElement(this.obj);
+  if (element.children.length !== 0)
+    throw new Error('The element cannot have children because its content will be temporarily overwritten.');
+
+  const root = element.getRootNode();
+  if (root !== document)
+    // The tooltip will check clientWidth, but clientWidth will be 0 unless
+    // `element` is attached to the DOM. We also need `element` to be attached
+    // to the DOM so that we can use getComputedStyle() below.
+    document.body.append(root);
+
+  // Find or create the element that sets the text-overflow CSS property.
+  let overflowContainer = element;
+  while (true) { // eslint-disable-line no-constant-condition
+    const { textOverflow } = getComputedStyle(overflowContainer);
+    if (textOverflow !== 'clip') break;
+    overflowContainer = overflowContainer.parentNode;
+    if (overflowContainer === document.body) break;
+  }
+  const hasContainer = overflowContainer !== document.body;
+  if (!hasContainer) {
+    if (root === document)
+      throw new Error('The element does not have an ancestor that sets text-overflow. A new ancestor was not inserted because the element is already attached to the DOM.');
+    overflowContainer = document.createElement('div');
+    Object.assign(overflowContainer.style, {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    });
+    root.remove();
+    overflowContainer.append(root);
+    document.body.append(overflowContainer);
+  }
+
+  const text = element.textContent;
+  if (text.trim().length <= 5)
+    throw new Error('text of element must be more than 5 characters');
+  element.textContent = 'a'.repeat(500);
+  const containerOverflows = overflowContainer.clientWidth > window.innerWidth;
+  try {
+    // Make sure that overflowContainer does not itself overflow. Usually that
+    // happens because the width or max-width of the container is set in an
+    // ancestor component that has not been mounted. We don't want to require
+    // that the ancestor component be mounted, so we will try to set max-width
+    // ourselves.
+    if (containerOverflows) {
+      if (overflowContainer.style.maxWidth !== '')
+        throw new Error('Could not prevent the element that sets text-overflow from itself overflowing. The element already sets max-width.');
+      overflowContainer.style.maxWidth = `${window.innerWidth}px`;
+      if (overflowContainer.clientWidth > window.innerWidth)
+        throw new Error('Could not prevent the element that sets text-overflow from itself overflowing. You may need to mount a parent component, for example, a table instead of a row.');
+    }
+
+    await element.should.have.tooltip(element.textContent);
+    element.textContent = 'aaaaaa';
+    await element.should.not.have.tooltip();
+  } finally {
+    element.textContent = text;
+    if (root !== document) root.remove();
+    if (!hasContainer)
+      overflowContainer.remove();
+    else if (containerOverflows)
+      overflowContainer.style.maxWidth = '';
+  }
+});
+
+Assertion.add('alert', function assertAlert(type = undefined, message = undefined) {
   this.params = { operator: 'to show an alert' };
   const { alert } = this.obj.vm.$container;
   alert.state.should.be.true();
diff --git a/test/components/actor-link.spec.js b/test/components/actor-link.spec.js
index 74e2ff6a2..4ea1d10d3 100644
--- a/test/components/actor-link.spec.js
+++ b/test/components/actor-link.spec.js
@@ -8,21 +8,21 @@ import { mount } from '../util/lifecycle';
 
 describe('ActorLink', () => {
   beforeEach(() => {
-    mockLogin({ displayName: 'Alice' });
+    mockLogin({ displayName: 'Alice Allison' });
   });
 
-  it('renders a LinkIfCan component if the actor is a user', () => {
+  it('renders a LinkIfCan component if the actor is a user', async () => {
     const component = mount(ActorLink, {
       props: { actor: testData.extendedUsers.first() },
       container: { router: mockRouter('/system/audits') }
     });
     const linkIfCan = component.getComponent(LinkIfCan);
     linkIfCan.props().to.should.equal('/users/1/edit');
-    linkIfCan.text().should.equal('Alice');
-    linkIfCan.attributes().title.should.equal('Alice');
+    linkIfCan.text().should.equal('Alice Allison');
+    await linkIfCan.should.have.textTooltip();
   });
 
-  it('renders a span if the actor is a deleted user', () => {
+  it('renders a span if the actor is a deleted user', async () => {
     const actor = testData.standardUsers
       .createPast(1, {
         displayName: 'Deleted User',
@@ -36,10 +36,10 @@ describe('ActorLink', () => {
     component.findComponent(LinkIfCan).exists().should.be.false();
     component.element.tagName.should.equal('SPAN');
     component.text().should.equal('Deleted User');
-    component.attributes().title.should.equal('Deleted User');
+    await component.should.have.textTooltip();
   });
 
-  it('renders a span if the actor is not a user', () => {
+  it('renders a span if the actor is not a user', async () => {
     const actor = testData.extendedFieldKeys
       .createPast(1, { displayName: 'My App User' })
       .last();
@@ -50,6 +50,6 @@ describe('ActorLink', () => {
     component.findComponent(LinkIfCan).exists().should.be.false();
     component.element.tagName.should.equal('SPAN');
     component.text().should.equal('My App User');
-    component.attributes().title.should.equal('My App User');
+    await component.should.have.textTooltip();
   });
 });
diff --git a/test/components/audit/table.spec.js b/test/components/audit/table.spec.js
index de8d7714d..7e1972fc1 100644
--- a/test/components/audit/table.spec.js
+++ b/test/components/audit/table.spec.js
@@ -28,18 +28,18 @@ const testType = (row, type) => {
   else
     throw new Error('invalid type');
 };
-const testTarget = (row, text, to = undefined) => {
+const testTarget = async (row, text, to = undefined) => {
   if (text === '') {
     row.get('.target').text().should.equal('');
   } else if (to == null) {
     const span = row.get('.target span');
     span.text().should.equal(text);
-    span.attributes().title.should.equal(text);
+    await span.should.have.textTooltip();
   } else {
     const link = row.findAllComponents(RouterLinkStub).find(wrapper =>
       wrapper.element.closest('.target') != null);
     link.text().should.equal(text);
-    link.attributes().title.should.equal(text);
+    await link.should.have.textTooltip();
     link.props().to.should.equal(to);
   }
 };
@@ -76,7 +76,7 @@ describe('AuditTable', () => {
     ];
 
     for (const [action, type] of cases) {
-      it(`renders a ${action} audit correctly`, () => {
+      it(`renders a ${action} audit correctly`, async () => {
         const user = testData.extendedUsers
           .createPast(1, { displayName: 'User 2' })
           .last();
@@ -87,18 +87,18 @@ describe('AuditTable', () => {
         });
         const row = mountComponent();
         testType(row, type);
-        testTarget(row, 'User 2', '/users/2/edit');
+        await testTarget(row, 'User 2', '/users/2/edit');
       });
     }
 
-    it('renders a user.session.create audit correctly', () => {
+    it('renders a user.session.create audit correctly', async () => {
       testData.extendedAudits.createPast(1, { action: 'user.session.create' });
       const row = mountComponent();
       testType(row, ['User', 'Log in']);
-      testTarget(row, 'User 1', '/users/1/edit');
+      await testTarget(row, 'User 1', '/users/1/edit');
     });
 
-    it('renders deleted user targets correctly', () => {
+    it('renders deleted user targets correctly', async () => {
       testData.extendedUsers.createPast(1, { displayName: 'User Name' });
       const deletedUser = testData.toActor(testData.extendedUsers.last());
       deletedUser.deletedAt = ago({ days: 2 }).toISO();
@@ -109,10 +109,10 @@ describe('AuditTable', () => {
       });
       const target = mountComponent().get('.target');
       target.find('a').exists().should.be.false();
-      target.text().should.equal('User Name');
+      target.get('span:nth-child(2)').text().should.equal('User Name');
       const icon = target.find('.icon-trash');
       icon.exists().should.be.true();
-      icon.attributes().title.should.equal('This resource has been deleted.');
+      await icon.should.have.tooltip('This resource has been deleted.');
     });
   });
 
@@ -124,7 +124,7 @@ describe('AuditTable', () => {
     ];
 
     for (const [action, type] of cases) {
-      it(`renders a ${action} audit correctly`, () => {
+      it(`renders a ${action} audit correctly`, async () => {
         testData.extendedAudits.createPast(1, {
           actor: testData.extendedUsers.first(),
           action,
@@ -134,11 +134,11 @@ describe('AuditTable', () => {
         });
         const row = mountComponent();
         testType(row, type);
-        testTarget(row, 'My Project', '/projects/1');
+        await testTarget(row, 'My Project', '/projects/1');
       });
     }
 
-    it('renders deleted project targets correctly', () => {
+    it('renders deleted project targets correctly', async () => {
       const deletedProject = testData.standardProjects
         .createPast(1, { name: 'My Project' })
         .last();
@@ -150,10 +150,10 @@ describe('AuditTable', () => {
       });
       const target = mountComponent().get('.target');
       target.find('a').exists().should.be.false();
-      target.text().should.equal('My Project');
+      target.get('span:nth-child(2)').text().should.equal('My Project');
       const icon = target.find('.icon-trash');
       icon.exists().should.be.true();
-      icon.attributes().title.should.equal('This resource has been deleted.');
+      await icon.should.have.tooltip('This resource has been deleted.');
     });
   });
 
@@ -174,7 +174,7 @@ describe('AuditTable', () => {
     ];
 
     for (const [action, type] of cases) {
-      it(`renders a ${action} audit correctly`, () => {
+      it(`renders a ${action} audit correctly`, async () => {
         testData.extendedAudits.createPast(1, {
           actor: testData.extendedUsers.first(),
           action,
@@ -184,11 +184,11 @@ describe('AuditTable', () => {
         });
         const row = mountComponent();
         testType(row, type);
-        testTarget(row, 'My Form', '/projects/1/forms/a%20b');
+        await testTarget(row, 'My Form', '/projects/1/forms/a%20b');
       });
     }
 
-    it('renders deleted form targets correctly', () => {
+    it('renders deleted form targets correctly', async () => {
       const deletedForm = testData.standardForms
         .createPast(1, { xmlFormId: 'a', name: 'My Form' })
         .last();
@@ -200,10 +200,10 @@ describe('AuditTable', () => {
       });
       const target = mountComponent().get('.target');
       target.find('a').exists().should.be.false();
-      target.text().should.equal('My Form');
+      target.get('span:nth-child(2)').text().should.equal('My Form');
       const icon = target.find('.icon-trash');
       icon.exists().should.be.true();
-      icon.attributes().title.should.equal('This resource has been deleted.');
+      await icon.should.have.tooltip('This resource has been deleted.');
     });
 
     it('shows the xmlFormId if the form does not have a name', () => {
@@ -240,7 +240,7 @@ describe('AuditTable', () => {
     ];
 
     for (const [action, type] of cases) {
-      it(`renders a ${action} audit correctly`, () => {
+      it(`renders a ${action} audit correctly`, async () => {
         testData.extendedAudits.createPast(1, {
           actor: testData.extendedUsers.first(),
           action,
@@ -250,11 +250,11 @@ describe('AuditTable', () => {
         });
         const row = mountComponent();
         testType(row, type);
-        testTarget(row, 'My Public Link');
+        await testTarget(row, 'My Public Link');
       });
     }
 
-    it('renders deleted public link targets correctly', () => {
+    it('renders deleted public link targets correctly', async () => {
       const deletedActor = testData.toActor(testData.standardPublicLinks
         .createPast(1, { displayName: 'My Public Link' })
         .last());
@@ -266,10 +266,10 @@ describe('AuditTable', () => {
       });
       const target = mountComponent().get('.target');
       target.find('a').exists().should.be.false();
-      target.text().should.equal('My Public Link');
+      target.get('span:nth-child(2)').text().should.equal('My Public Link');
       const icon = target.find('.icon-trash');
       icon.exists().should.be.true();
-      icon.attributes().title.should.equal('This resource has been deleted.');
+      await icon.should.have.tooltip('This resource has been deleted.');
     });
   });
 
@@ -280,7 +280,7 @@ describe('AuditTable', () => {
     ];
 
     for (const [action, type] of cases) {
-      it(`renders a ${action} audit correctly`, () => {
+      it(`renders a ${action} audit correctly`, async () => {
         testData.extendedAudits.createPast(1, {
           actor: testData.extendedUsers.first(),
           action,
@@ -290,7 +290,7 @@ describe('AuditTable', () => {
         });
         const row = mountComponent();
         testType(row, type);
-        testTarget(row, 'people');
+        await testTarget(row, 'people');
       });
     }
   });
@@ -305,7 +305,7 @@ describe('AuditTable', () => {
     ];
 
     for (const [action, type] of cases) {
-      it(`renders a ${action} audit correctly`, () => {
+      it(`renders a ${action} audit correctly`, async () => {
         testData.extendedAudits.createPast(1, {
           actor: testData.extendedUsers.first(),
           action,
@@ -315,11 +315,11 @@ describe('AuditTable', () => {
         });
         const row = mountComponent();
         testType(row, type);
-        testTarget(row, 'My App User');
+        await testTarget(row, 'My App User');
       });
     }
 
-    it('renders deleted app user targets correctly', () => {
+    it('renders deleted app user targets correctly', async () => {
       const deletedActor = testData.toActor(testData.extendedFieldKeys
         .createPast(1, { displayName: 'My App User' })
         .last());
@@ -331,25 +331,25 @@ describe('AuditTable', () => {
       });
       const target = mountComponent().get('.target');
       target.find('a').exists().should.be.false();
-      target.text().should.equal('My App User');
+      target.get('span:nth-child(2)').text().should.equal('My App User');
       const icon = target.find('.icon-trash');
       icon.exists().should.be.true();
-      icon.attributes().title.should.equal('This resource has been deleted.');
+      await icon.should.have.tooltip('This resource has been deleted.');
     });
   });
 
-  it('renders a config.set audit correctly', () => {
+  it('renders a config.set audit correctly', async () => {
     testData.extendedAudits.createPast(1, { action: 'config.set' });
     const row = mountComponent();
     testType(row, ['Server Configuration', 'Set']);
-    testTarget(row, '');
+    await testTarget(row, '');
   });
 
-  it('renders an analytics audit correctly', () => {
+  it('renders an analytics audit correctly', async () => {
     testData.extendedAudits.createPast(1, { action: 'analytics' });
     const row = mountComponent();
     testType(row, ['Report Usage']);
-    testTarget(row, '');
+    await testTarget(row, '');
   });
 
   it('renders an audit with an unknown action correctly', () => {
@@ -372,7 +372,7 @@ describe('AuditTable', () => {
     testType(mountComponent(), ['something.unknown']);
   });
 
-  it('renders an audit with an unknown action for its category', () => {
+  it('renders an audit with an unknown action for its category', async () => {
     testData.extendedAudits.createPast(1, {
       action: 'project.unknown',
       actee: testData.standardProjects
@@ -381,7 +381,7 @@ describe('AuditTable', () => {
     });
     const row = mountComponent();
     testType(row, ['project.unknown']);
-    testTarget(row, 'My Project', '/projects/1');
+    await testTarget(row, 'My Project', '/projects/1');
   });
 
   describe('initiator', () => {
@@ -397,7 +397,7 @@ describe('AuditTable', () => {
       actorLink.props().actor.displayName.should.equal('User 1');
     });
 
-    it('renders correctly for an audit with a deleted actor', () => {
+    it('renders correctly for an audit with a deleted actor', async () => {
       testData.extendedAudits.createPast(1, {
         actor: testData.extendedUsers
           .createPast(1, {
@@ -411,7 +411,7 @@ describe('AuditTable', () => {
       const row = mountComponent();
       row.findComponent(ActorLink).exists().should.be.true();
       const icon = row.get('.initiator .icon-trash');
-      icon.attributes().title.should.equal('This resource has been deleted.');
+      await icon.should.have.tooltip('This resource has been deleted.');
     });
 
     it('renders correctly for an audit without an actor', () => {
@@ -436,7 +436,7 @@ describe('AuditTable', () => {
     selectable.text().should.equal('{"some":"json"}');
   });
 
-  it('renders a purged form row correctly', () => {
+  it('renders a purged form row correctly', async () => {
     testData.extendedAudits.createPast(1, {
       actor: testData.extendedUsers.first(),
       action: 'form.purge',
@@ -449,10 +449,10 @@ describe('AuditTable', () => {
     });
     const target = mountComponent().get('.target');
     target.find('a').exists().should.be.false();
-    target.text().should.equal('Purged Form');
+    target.get('span:nth-child(2)').text().should.equal('Purged Form');
     const icon = target.find('.icon-trash');
     icon.exists().should.be.true();
-    icon.attributes().title.should.equal('This resource has been purged.');
+    await icon.should.have.tooltip('This resource has been purged.');
     // The purged details aren't part of the audit and don't show up here
     // but the original details of the audit do
     const selectable = mountComponent().getComponent(Selectable);
diff --git a/test/components/dataset/row.spec.js b/test/components/dataset/row.spec.js
index a045b31fd..7a41015ec 100644
--- a/test/components/dataset/row.spec.js
+++ b/test/components/dataset/row.spec.js
@@ -12,13 +12,13 @@ const mountComponent = () => mount(DatasetRow, {
 });
 
 describe('DatasetRow', () => {
-  it('shows the name', () => {
+  it('shows the name', async () => {
     testData.extendedDatasets.createPast(1, { name: 'my_dataset' });
     const row = mountComponent();
     const link = row.getComponent(RouterLinkStub);
     link.props().to.should.equal('/projects/1/datasets/my_dataset');
     link.text().should.equal('my_dataset');
-    link.attributes().title.should.equal('my_dataset');
+    await link.should.have.textTooltip();
   });
 
   it('shows the num of entities', () => {
diff --git a/test/components/date-time.spec.js b/test/components/date-time.spec.js
index 1dcc57541..c33eb4782 100644
--- a/test/components/date-time.spec.js
+++ b/test/components/date-time.spec.js
@@ -35,18 +35,18 @@ describe('DateTime', () => {
   });
 
   describe('tooltip', () => {
-    it('shows the correct tooltip', () => {
+    it('shows the correct tooltip', async () => {
       const component = mount(DateTime, {
         props: { iso: '2020-01-01T12:34:56Z' }
       });
-      component.attributes().title.should.equal('2020/01/01 12:34:56');
+      await component.should.have.tooltip('2020/01/01 12:34:56');
     });
 
-    it('does not show a tooltip if the tooltip prop is false', () => {
+    it('does not show a tooltip if the tooltip prop is false', async () => {
       const component = mount(DateTime, {
         props: { iso: '2020-01-01T12:34:56Z', tooltip: false }
       });
-      should.not.exist(component.attributes().title);
+      await component.should.not.have.tooltip();
     });
   });
 
@@ -58,11 +58,11 @@ describe('DateTime', () => {
       component.element.tagName.should.equal('SPAN');
     });
 
-    it('does not have a title attribute', () => {
+    it('does not show a tooltip', async () => {
       const component = mount(DateTime, {
         props: { iso: null }
       });
-      should.not.exist(component.attributes().title);
+      await component.should.not.have.tooltip();
     });
 
     it('shows the correct text if the prop blank exists', () => {
diff --git a/test/components/enketo/fill.spec.js b/test/components/enketo/fill.spec.js
index ea3553908..b4aaf55d3 100644
--- a/test/components/enketo/fill.spec.js
+++ b/test/components/enketo/fill.spec.js
@@ -19,7 +19,7 @@ describe('EnketoFill', () => {
     button.get('span').text().should.equal('Some span text');
   });
 
-  it('renders correctly for a form without an enketoId', () => {
+  it('renders correctly for a form without an enketoId', async () => {
     const form = testData.extendedForms
       .createPast(1, { enketoId: null, state: 'open' })
       .last();
@@ -29,12 +29,13 @@ describe('EnketoFill', () => {
     });
     button.element.tagName.should.equal('BUTTON');
     button.attributes('aria-disabled').should.equal('true');
-    button.attributes().title.should.equal('Web Form is not available yet. It has not finished being processed. Please refresh later and try again.');
+    button.should.have.ariaDescription('Web Form is not available yet. It has not finished being processed. Please refresh later and try again.');
+    await button.should.have.tooltip();
     button.get('span').text().should.equal('Some span text');
   });
 
   describe('form is not open', () => {
-    it('disables the button for a form with a published version', () => {
+    it('disables the button for a form with a published version', async () => {
       const form = testData.extendedForms
         .createPast(1, { enketoId: 'xyz', state: 'closing' })
         .last();
@@ -43,7 +44,8 @@ describe('EnketoFill', () => {
         slots: { default: TestUtilSpan }
       });
       button.element.tagName.should.equal('BUTTON');
-      button.attributes().title.should.equal('This Form is not accepting new Submissions right now.');
+      button.should.have.ariaDescription('This Form is not accepting new Submissions right now.');
+      await button.should.have.tooltip();
     });
 
     it('does not disable the button for a draft', () => {
diff --git a/test/components/enketo/preview.spec.js b/test/components/enketo/preview.spec.js
index 5422fc990..7004617fc 100644
--- a/test/components/enketo/preview.spec.js
+++ b/test/components/enketo/preview.spec.js
@@ -15,7 +15,7 @@ describe('EnketoPreview', () => {
     button.attributes().href.should.equal('/-/preview/xyz');
   });
 
-  it('renders correctly for a form without an enketoId', () => {
+  it('renders correctly for a form without an enketoId', async () => {
     const form = testData.extendedForms
       .createPast(1, { enketoId: null, state: 'open' })
       .last();
@@ -24,11 +24,12 @@ describe('EnketoPreview', () => {
     });
     button.element.tagName.should.equal('BUTTON');
     button.attributes('aria-disabled').should.equal('true');
-    button.attributes().title.should.equal('Preview has not finished processing for this Form. Please refresh later and try again.');
+    button.should.have.ariaDescription('Preview has not finished processing for this Form. Please refresh later and try again.');
+    await button.should.have.tooltip();
   });
 
   describe('form is not open', () => {
-    it('disables the button for a form with a published version', () => {
+    it('disables the button for a form with a published version', async () => {
       const form = testData.extendedForms
         .createPast(1, { enketoId: 'xyz', state: 'closing' })
         .last();
@@ -36,7 +37,8 @@ describe('EnketoPreview', () => {
         props: { formVersion: form }
       });
       button.element.tagName.should.equal('BUTTON');
-      button.attributes().title.should.equal('In this version of ODK Central, preview is only available for Forms in the Open state.');
+      button.should.have.ariaDescription('In this version of ODK Central, preview is only available for Forms in the Open state.');
+      await button.should.have.tooltip();
     });
 
     it('does not disable the button for a draft', () => {
diff --git a/test/components/form-attachment/list.spec.js b/test/components/form-attachment/list.spec.js
index 383dd5bdc..245e8389a 100644
--- a/test/components/form-attachment/list.spec.js
+++ b/test/components/form-attachment/list.spec.js
@@ -45,13 +45,17 @@ describe('FormAttachmentList', () => {
       }
     });
 
-    it('adds a title attribute for the attachment name', async () => {
-      testData.standardFormAttachments.createPast(1, { name: 'foo.jpg' });
+    it('shows attachment name if attachment does not exist', async () => {
+      testData.standardFormAttachments.createPast(1, {
+        name: 'foo.jpg',
+        blobExists: false
+      });
       const component = await load('/projects/1/forms/f/draft/attachments', {
         root: false
       });
-      const td = component.get('td.form-attachment-list-name');
-      td.attributes().title.should.equal('foo.jpg');
+      const span = component.get('td.form-attachment-list-name span');
+      span.text().should.equal('foo.jpg');
+      await span.should.have.textTooltip();
     });
 
     it('shows a download link if the attachment exists', async () => {
@@ -62,8 +66,11 @@ describe('FormAttachmentList', () => {
       const component = await load('/projects/1/forms/f/draft/attachments', {
         root: false
       });
-      const { href } = component.get('td.form-attachment-list-name a').attributes();
+      const a = component.get('td.form-attachment-list-name a');
+      const { href } = a.attributes();
       href.should.equal('/v1/projects/1/forms/f/draft/attachments/foo%20bar.jpg');
+      a.text().should.equal('foo bar.jpg');
+      await a.should.have.textTooltip();
     });
 
     describe('updatedAt', () => {
@@ -87,11 +94,11 @@ describe('FormAttachmentList', () => {
         const component = await load('/projects/1/forms/f/draft/attachments', {
           root: false
         });
-        const spans = component.findAll('td.form-attachment-list-uploaded span');
-        spans.length.should.equal(2);
-        spans[0].classes('icon-exclamation-triangle').should.be.true();
-        spans[1].attributes().title.should.startWith('To upload files,');
-        spans[1].text().should.equal('Not yet uploaded');
+        const span = component.get('td.form-attachment-list-uploaded span');
+        span.find('.icon-exclamation-triangle').exists().should.be.true();
+        const text = span.get('.icon-exclamation-triangle + span').text();
+        text.should.equal('Not yet uploaded');
+        await span.should.have.tooltip(/^To upload files,/);
       });
 
       it('correctly renders a deleted attachment', async () => {
@@ -102,11 +109,11 @@ describe('FormAttachmentList', () => {
         const component = await load('/projects/1/forms/f/draft/attachments', {
           root: false
         });
-        const spans = component.findAll('td.form-attachment-list-uploaded span');
-        spans.length.should.equal(2);
-        spans[0].classes('icon-exclamation-triangle').should.be.true();
-        spans[1].attributes().title.should.startWith('To upload files,');
-        spans[1].text().should.equal('Not yet uploaded');
+        const span = component.get('td.form-attachment-list-uploaded span');
+        span.find('.icon-exclamation-triangle').exists().should.be.true();
+        const text = span.get('.icon-exclamation-triangle + span').text();
+        text.should.equal('Not yet uploaded');
+        await span.should.have.tooltip(/^To upload files,/);
       });
     });
   });
diff --git a/test/components/form-version/string.spec.js b/test/components/form-version/string.spec.js
index 198463d2d..9b20f8a5b 100644
--- a/test/components/form-version/string.spec.js
+++ b/test/components/form-version/string.spec.js
@@ -3,12 +3,12 @@ import FormVersionString from '../../../src/components/form-version/string.vue';
 import { mount } from '../../util/lifecycle';
 
 describe('FormVersionString', () => {
-  it('shows the version string', () => {
+  it('shows the version string', async () => {
     const component = mount(FormVersionString, {
-      props: { version: 'v1' }
+      props: { version: 'final_version' }
     });
-    component.text().should.equal('v1');
-    component.attributes().title.should.equal('v1');
+    component.text().should.equal('final_version');
+    await component.should.have.textTooltip();
   });
 
   it('accounts for an empty version string', () => {
@@ -16,7 +16,6 @@ describe('FormVersionString', () => {
       props: { version: '' }
     });
     component.text().should.equal('(blank)');
-    component.attributes().title.should.equal('(blank)');
     component.classes('blank-version').should.be.true();
   });
 });
diff --git a/test/components/form/head.spec.js b/test/components/form/head.spec.js
index 0fd476663..4127eb809 100644
--- a/test/components/form/head.spec.js
+++ b/test/components/form/head.spec.js
@@ -40,22 +40,20 @@ describe('FormHead', () => {
       });
     });
 
-    it("shows the form's name", () => {
+    it("shows the form's name", async () => {
       testData.extendedForms.createPast(1, { name: 'My Form' });
-      return load('/projects/1/forms/f').then(app => {
-        const h1 = app.get('#form-head-form-nav .h1');
-        h1.text().should.equal('My Form');
-        h1.attributes().title.should.equal('My Form');
-      });
+      const app = await load('/projects/1/forms/f');
+      const h1 = app.get('#form-head-form-nav .h1');
+      h1.text().should.equal('My Form');
+      await h1.should.have.textTooltip();
     });
 
-    it("shows the form's xmlFormId if the form does not have a name", () => {
-      testData.extendedForms.createPast(1, { name: null });
-      return load('/projects/1/forms/f').then(app => {
-        const h1 = app.get('#form-head-form-nav .h1');
-        h1.text().should.equal('f');
-        h1.attributes().title.should.equal('f');
-      });
+    it("shows the form's xmlFormId if the form does not have a name", async () => {
+      testData.extendedForms.createPast(1, { xmlFormId: 'my_form', name: null });
+      const app = await load('/projects/1/forms/my_form');
+      const h1 = app.get('#form-head-form-nav .h1');
+      h1.text().should.equal('my_form');
+      await h1.should.have.textTooltip();
     });
   });
 
@@ -91,31 +89,33 @@ describe('FormHead', () => {
       });
     });
 
-    it('disables tabs for a form without a published version', () => {
+    it('disables tabs for a form without a published version', async () => {
       mockLogin();
       testData.extendedForms.createPast(1, { draft: true });
-      return load('/projects/1/forms/f/draft').then(app => {
-        const tabs = app.findAll('#form-head-form-tabs li');
-        tabs.length.should.equal(5);
-        for (const tab of tabs) {
-          tab.classes('disabled').should.be.true();
-          tab.attributes().title.should.equal('These functions will become available once you publish your Draft Form');
-        }
-      });
+      const app = await load('/projects/1/forms/f/draft');
+      const tabs = app.findAll('#form-head-form-tabs li');
+      tabs.length.should.equal(5);
+      for (const tab of tabs) {
+        tab.classes('disabled').should.be.true();
+        const a = tab.get('a');
+        a.should.have.ariaDescription('These functions will become available once you publish your Draft Form');
+        await a.should.have.tooltip();
+      }
     });
 
-    it('does not disable tabs for a form with a published version', () => {
+    it('does not disable tabs for a form with a published version', async () => {
       mockLogin();
       testData.extendedForms.createPast(1);
       testData.extendedFormVersions.createPast(1, { draft: true });
-      return load('/projects/1/forms/f/draft').then(app => {
-        const tabs = app.findAll('#form-head-form-tabs li');
-        tabs.length.should.equal(5);
-        for (const tab of tabs) {
-          tab.classes('disabled').should.be.false();
-          should.not.exist(tab.attributes().title);
-        }
-      });
+      const app = await load('/projects/1/forms/f/draft');
+      const tabs = app.findAll('#form-head-form-tabs li');
+      tabs.length.should.equal(5);
+      for (const tab of tabs) {
+        tab.classes('disabled').should.be.false();
+        const a = tab.get('a');
+        a.should.not.have.ariaDescription();
+        await a.should.not.have.tooltip();
+      }
     });
   });
 
diff --git a/test/components/form/restore.spec.js b/test/components/form/restore.spec.js
index e56960545..dc1c4e51a 100644
--- a/test/components/form/restore.spec.js
+++ b/test/components/form/restore.spec.js
@@ -59,7 +59,8 @@ describe('FormRestore', () => {
       .afterResponses(async (app) => {
         const button = app.get('[data-form-id="111"]');
         button.attributes('aria-disabled').should.equal('true');
-        button.attributes().title.should.equal('This Form cannot be undeleted because an active Form with the same ID exists.');
+        button.should.have.ariaDescription('This Form cannot be undeleted because an active Form with the same ID exists.');
+        await button.should.have.tooltip();
       });
   });
 
diff --git a/test/components/form/row.spec.js b/test/components/form/row.spec.js
index 1366d2422..4b7f4603f 100644
--- a/test/components/form/row.spec.js
+++ b/test/components/form/row.spec.js
@@ -101,7 +101,7 @@ describe('FormRow', () => {
   describe('review state counts', () => {
     beforeEach(mockLogin);
 
-    it('shows the correct counts and icons for each review state', () => {
+    it('shows the correct counts and icons for each review state', async () => {
       testData.extendedForms.createPast(1, { xmlFormId: 'a b', reviewStates: { received: 2345, hasIssues: 1, edited: 3 } });
       const columns = mountComponent().findAll('.review-state');
       columns.length.should.equal(3);
@@ -109,9 +109,9 @@ describe('FormRow', () => {
       columns[0].find('.icon-dot-circle-o').exists().should.be.true();
       columns[1].find('.icon-comments').exists().should.be.true();
       columns[2].find('.icon-pencil').exists().should.be.true();
-      columns[0].find('a').attributes().title.should.equal('Received');
-      columns[1].find('a').attributes().title.should.equal('Has issues');
-      columns[2].find('a').attributes().title.should.equal('Edited');
+      await columns[0].get('a').should.have.tooltip('Received');
+      await columns[1].get('a').should.have.tooltip('Has issues');
+      await columns[2].get('a').should.have.tooltip('Edited');
     });
 
     it('shows blank review state columns when the form is a draft', () => {
@@ -125,7 +125,7 @@ describe('FormRow', () => {
   describe('last submission', () => {
     beforeEach(mockLogin);
 
-    it('shows the correct time since the last submission', () => {
+    it('shows the correct time since the last submission', async () => {
       setLuxon({ defaultZoneName: 'UTC' });
       const lastSubmission = '2023-01-01T00:00:00Z';
       testData.extendedForms.createPast(1, { lastSubmission });
@@ -133,9 +133,8 @@ describe('FormRow', () => {
       span.text().should.match(/ago$/);
       const dateTime = span.getComponent(DateTime);
       dateTime.props().iso.should.equal(lastSubmission);
-      const { title } = span.attributes();
-      title.should.equal('Latest Submission\n2023/01/01 00:00:00');
-      should.not.exist(dateTime.attributes().title);
+      await span.should.have.tooltip('Latest Submission\n2023/01/01 00:00:00');
+      await dateTime.should.not.have.tooltip();
     });
 
     it('shows the correct icon', () => {
@@ -144,11 +143,11 @@ describe('FormRow', () => {
       cell.find('.icon-clock-o').exists().should.be.true();
     });
 
-    it('shows (none) if no submission', () => {
+    it('shows (none) if no submission', async () => {
       testData.extendedForms.createPast(1, { submissions: 0 });
       const span = mountComponent().get('.last-submission span');
       span.text().should.equal('(none)');
-      span.attributes().title.should.equal('Latest Submission');
+      await span.should.have.tooltip('Latest Submission');
     });
 
     it('shows blank last submission column when the form is a draft', () => {
@@ -174,11 +173,11 @@ describe('FormRow', () => {
       cell.find('.icon-asterisk').exists().should.be.true();
     });
 
-    it('shows the correct icon', () => {
+    it('shows the correct icon', async () => {
       testData.extendedForms.createPast(1, { xmlFormId: 'a b', submissions: 4 });
       const cell = mountComponent().find('.total-submissions');
       cell.find('.icon-asterisk').exists().should.be.true();
-      cell.find('a').attributes().title.should.equal('Total Submissions');
+      await cell.get('a').should.have.tooltip('Total Submissions');
     });
   });
   describe('all submission links', () => {
@@ -304,7 +303,7 @@ describe('FormRow', () => {
       mockLogin();
       testData.extendedForms.createPast(1, { state: 'closing' });
       const actions = mountComponent().get('.actions');
-      actions.text().should.equal('Closing');
+      actions.get('span').text().should.equal('Closing');
       actions.find('.closing-icon').exists().should.be.true();
     });
 
diff --git a/test/components/form/trash-row.spec.js b/test/components/form/trash-row.spec.js
index 913681d67..f8dce2c70 100644
--- a/test/components/form/trash-row.spec.js
+++ b/test/components/form/trash-row.spec.js
@@ -55,11 +55,11 @@ describe('FormTrashRow', () => {
   describe('last submission count and date', () => {
     beforeEach(mockLogin);
 
-    it('shows the submission count', () => {
+    it('shows the submission count', async () => {
       const formData = { name: 'a form', submissions: 12345 };
       const cell = mountComponent(formData).get('.total-submissions');
       cell.text().should.equal('12,345');
-      cell.find('span').attributes().title.should.equal('Total Submissions');
+      await cell.get('span').should.have.tooltip('Total Submissions');
     });
 
     it('shows the submission count when 0', () => {
@@ -68,7 +68,7 @@ describe('FormTrashRow', () => {
       text.should.equal('0');
     });
 
-    it('shows the time since last submission', () => {
+    it('shows the time since last submission', async () => {
       setLuxon({ defaultZoneName: 'UTC' });
       const lastSubmission = '2023-01-01T00:00:00Z';
       const formData = { name: 'a form', submissions: 1, lastSubmission };
@@ -76,16 +76,15 @@ describe('FormTrashRow', () => {
       span.text().should.match(/ago$/);
       const dateTime = span.getComponent(DateTime);
       dateTime.props().iso.should.equal(lastSubmission);
-      const { title } = span.attributes();
-      title.should.equal('Latest Submission\n2023/01/01 00:00:00');
-      should.not.exist(dateTime.attributes().title);
+      await span.should.have.tooltip('Latest Submission\n2023/01/01 00:00:00');
+      await dateTime.should.not.have.tooltip();
     });
 
-    it('does not render time if there is no last submission', () => {
+    it('does not render time if there is no last submission', async () => {
       const formData = { name: 'a form', submissions: 0 };
       const span = mountComponent(formData).get('.last-submission span');
       span.text().should.equal('(none)');
-      span.attributes().title.should.equal('Latest Submission');
+      await span.should.have.tooltip('Latest Submission');
     });
   });
 
@@ -98,12 +97,13 @@ describe('FormTrashRow', () => {
       button.attributes('aria-disabled').should.equal('false');
     });
 
-    it('disables the undelete button if active form with same id exists', () => {
+    it('disables the undelete button if active form with same id exists', async () => {
       testData.extendedForms.createPast(1, { xmlFormId: 'foo' });
       const button = mountComponent({ xmlFormId: 'foo' }).get('.form-trash-row-restore-button');
       button.element.tagName.should.equal('BUTTON');
       button.attributes('aria-disabled').should.equal('true');
-      button.attributes().title.should.equal('This Form cannot be undeleted because an active Form with the same ID exists.');
+      button.should.have.ariaDescription('This Form cannot be undeleted because an active Form with the same ID exists.');
+      await button.should.tooltip();
     });
   });
 });
diff --git a/test/components/multiselect.spec.js b/test/components/multiselect.spec.js
index 0e82c4198..f3f4a9f81 100644
--- a/test/components/multiselect.spec.js
+++ b/test/components/multiselect.spec.js
@@ -57,26 +57,29 @@ describe('Multiselect', () => {
     });
   });
 
-  describe('option title', () => {
-    it('uses the title property if it exists', () => {
+  describe('option description', () => {
+    it('uses the description property if it exists', async () => {
       const component = mountComponent({
-        props: { options: [{ value: 'foo', text: 'bar', title: 'baz' }] }
-      });
-      component.get('.checkbox span').attributes().title.should.equal('baz');
-    });
-
-    it('falls back to the text property', () => {
-      const component = mountComponent({
-        props: { options: [{ value: 'foo', text: 'bar' }] }
+        props: {
+          options: [
+            { value: 1, text: 'Alice Allison', description: 'Has a role of admin.' }
+          ]
+        }
       });
-      component.get('.checkbox span').attributes().title.should.equal('bar');
+      const checkbox = component.get('.checkbox');
+      checkbox.get('input').should.have.ariaDescription('Has a role of admin.');
+      await checkbox.get('span').should.have.tooltip('Has a role of admin.');
     });
 
-    it('falls back again to the value property', () => {
+    it('shows a tooltip for text if description does not exist', async () => {
       const component = mountComponent({
-        props: { options: [{ value: 'foo' }] }
+        props: { options: [{ value: 1, text: 'Alice Allison' }] },
+        attachTo: document.body
       });
-      component.get('.checkbox span').attributes().title.should.equal('foo');
+      await toggle(component);
+      const checkbox = component.get('.checkbox');
+      checkbox.get('input').should.not.have.ariaDescription();
+      await checkbox.get('span').should.have.textTooltip();
     });
   });
 
@@ -241,8 +244,8 @@ describe('Multiselect', () => {
 
   describe('search', () => {
     const users = [
-      { value: 1, text: 'Alice', title: 'Has a role of admin.' },
-      { value: 2, text: 'Bob', title: 'Has a role of manager.' }
+      { value: 1, text: 'Alice', description: 'Has a role of admin.' },
+      { value: 2, text: 'Bob', description: 'Has a role of manager.' }
     ];
 
     it('shows a search input if the search prop is specified', () => {
@@ -275,7 +278,7 @@ describe('Multiselect', () => {
       });
       await toggle(component);
       await component.get('.search input').setValue('c');
-      const matches = component.findAll('.search-match');
+      const matches = component.findAll('.search-match label');
       matches.map(match => match.text()).should.eql(['Alice']);
     });
 
@@ -291,14 +294,14 @@ describe('Multiselect', () => {
       li[1].should.be.hidden(true);
     });
 
-    it('shows options whose title matches', async () => {
+    it('shows options whose description matches', async () => {
       const component = mountComponent({
         props: { options: users, search: 'Search' },
         attachTo: document.body
       });
       await toggle(component);
       await component.get('.search input').setValue('admin');
-      const matches = component.findAll('.search-match');
+      const matches = component.findAll('.search-match label');
       matches.map(match => match.text()).should.eql(['Alice']);
     });
 
@@ -309,7 +312,7 @@ describe('Multiselect', () => {
       });
       await toggle(component);
       await component.get('.search input').setValue('1');
-      const matches = component.findAll('.search-match');
+      const matches = component.findAll('.search-match label');
       matches.map(match => match.text()).should.eql(['1']);
     });
 
@@ -330,7 +333,7 @@ describe('Multiselect', () => {
       });
       await toggle(component);
       await component.get('.search input').setValue('C');
-      const matches = component.findAll('.search-match');
+      const matches = component.findAll('.search-match label');
       matches.map(match => match.text()).should.eql(['Alice']);
     });
 
diff --git a/test/components/project/form-access.spec.js b/test/components/project/form-access.spec.js
index b303c7b00..a0ce65160 100644
--- a/test/components/project/form-access.spec.js
+++ b/test/components/project/form-access.spec.js
@@ -77,8 +77,8 @@ describe('ProjectFormAccess', () => {
         ''
         // There is no column for "App User 3".
       ]);
-      th[3].attributes().title.should.equal('App User 2');
-      th[4].attributes().title.should.equal('App User 1');
+      await th[3].get('span').should.have.textTooltip();
+      await th[4].get('span').should.have.textTooltip();
     });
 
     it('shows a message if there are no forms', async () => {
diff --git a/test/components/project/form-access/row.spec.js b/test/components/project/form-access/row.spec.js
index e6b6eaa85..2ec99f810 100644
--- a/test/components/project/form-access/row.spec.js
+++ b/test/components/project/form-access/row.spec.js
@@ -24,22 +24,20 @@ describe('ProjectFormAccessRow', () => {
   });
 
   describe('form name and xmlFormId', () => {
-    it("shows the form's name if the form has one", () => {
+    it("shows the form's name if the form has one", async () => {
       testData.extendedForms.createPast(1, { xmlFormId: 'f', name: 'My Form' });
-      return load('/projects/1/form-access').then(app => {
-        const a = app.get('.project-form-access-row-form-name a');
-        a.text().should.equal('My Form');
-        a.attributes().title.should.equal('My Form');
-      });
+      const app = await load('/projects/1/form-access');
+      const a = app.get('.project-form-access-row-form-name a');
+      a.text().should.equal('My Form');
+      await a.should.have.textTooltip();
     });
 
-    it('shows the xmlFormId if the form does not have a name', () => {
-      testData.extendedForms.createPast(1, { xmlFormId: 'f', name: null });
-      return load('/projects/1/form-access').then(app => {
-        const a = app.get('.project-form-access-row-form-name a');
-        a.text().should.equal('f');
-        a.attributes().title.should.equal('f');
-      });
+    it('shows the xmlFormId if the form does not have a name', async () => {
+      testData.extendedForms.createPast(1, { xmlFormId: 'my_form', name: null });
+      const app = await load('/projects/1/form-access');
+      const a = app.get('.project-form-access-row-form-name a');
+      a.text().should.equal('my_form');
+      await a.should.have.textTooltip();
     });
   });
 
diff --git a/test/components/project/form-row.spec.js b/test/components/project/form-row.spec.js
index 26806023d..099c70fa8 100644
--- a/test/components/project/form-row.spec.js
+++ b/test/components/project/form-row.spec.js
@@ -132,7 +132,7 @@ describe('ProjectFormRow', () => {
   describe('review state counts', () => {
     beforeEach(mockLogin);
 
-    it('shows the correct counts and icons for each review state', () => {
+    it('shows the correct counts and icons for each review state', async () => {
       testData.extendedForms.createPast(1, { xmlFormId: 'a b', reviewStates: { received: 2345, hasIssues: 1, edited: 3 } });
       const columns = mountComponent().findAll('.review-state');
       columns.length.should.equal(3);
@@ -140,9 +140,9 @@ describe('ProjectFormRow', () => {
       columns[0].find('.icon-dot-circle-o').exists().should.be.true();
       columns[1].find('.icon-comments').exists().should.be.true();
       columns[2].find('.icon-pencil').exists().should.be.true();
-      columns[0].find('span').attributes().title.should.equal('Received');
-      columns[1].find('span').attributes().title.should.equal('Has issues');
-      columns[2].find('span').attributes().title.should.equal('Edited');
+      await columns[0].get('span').should.have.tooltip('Received');
+      await columns[1].get('span').should.have.tooltip('Has issues');
+      await columns[2].get('span').should.have.tooltip('Edited');
     });
 
     it('shows blank review state columns when the form is a draft', () => {
@@ -155,7 +155,7 @@ describe('ProjectFormRow', () => {
   describe('last submission', () => {
     beforeEach(mockLogin);
 
-    it('shows the correct time since the last submission', () => {
+    it('shows the correct time since the last submission', async () => {
       setLuxon({ defaultZoneName: 'UTC' });
       const lastSubmission = '2023-01-01T00:00:00Z';
       testData.extendedForms.createPast(1, { lastSubmission });
@@ -163,9 +163,8 @@ describe('ProjectFormRow', () => {
       span.text().should.match(/ago$/);
       const dateTime = span.getComponent(DateTime);
       dateTime.props().iso.should.equal(lastSubmission);
-      const { title } = span.attributes();
-      title.should.equal('Latest Submission\n2023/01/01 00:00:00');
-      should.not.exist(dateTime.attributes().title);
+      await span.should.have.tooltip('Latest Submission\n2023/01/01 00:00:00');
+      await dateTime.should.not.have.tooltip();
     });
 
     it('shows the correct icon', () => {
@@ -174,11 +173,11 @@ describe('ProjectFormRow', () => {
       cell.find('.icon-clock-o').exists().should.be.true();
     });
 
-    it('shows (none) if no submission', () => {
+    it('shows (none) if no submission', async () => {
       testData.extendedForms.createPast(1, { submissions: 0 });
       const span = mountComponent().get('.last-submission span');
       span.text().should.equal('(none)');
-      span.attributes().title.should.equal('Latest Submission');
+      await span.should.have.tooltip('Latest Submission');
     });
 
     it('shows blank last submission column when the form is a draft', () => {
@@ -202,11 +201,11 @@ describe('ProjectFormRow', () => {
       row.find('.not-published').text().should.equal('Not published yet');
     });
 
-    it('shows the correct icon', () => {
+    it('shows the correct icon', async () => {
       testData.extendedForms.createPast(1, { xmlFormId: 'a b', submissions: 4 });
       const cell = mountComponent().find('.total-submissions');
       cell.find('.icon-asterisk').exists().should.be.true();
-      cell.find('span').attributes().title.should.equal('Total Submissions');
+      await cell.get('span').should.have.tooltip('Total Submissions');
     });
   });
 
diff --git a/test/components/project/user/list.spec.js b/test/components/project/user/list.spec.js
index 2aaef3d17..fc6476f84 100644
--- a/test/components/project/user/list.spec.js
+++ b/test/components/project/user/list.spec.js
@@ -164,10 +164,12 @@ describe('ProjectUserList', () => {
 
       tr[0].get('td').text().should.equal('User 1');
       selects[0].attributes('aria-disabled').should.equal('true');
-      selects[0].attributes().title.should.equal('You may not edit your own Project Role.');
+      selects[0].should.have.ariaDescription('You may not edit your own Project Role.');
+      await selects[0].should.have.tooltip();
 
       selects[1].attributes('aria-disabled').should.equal('false');
-      should.not.exist(selects[1].attributes().title);
+      selects[1].should.not.have.ariaDescription();
+      await selects[1].should.not.have.tooltip();
     });
 
     describe('no assignments', () => {
diff --git a/test/components/public-link/row.spec.js b/test/components/public-link/row.spec.js
index 82fc9c358..938baf8f5 100644
--- a/test/components/public-link/row.spec.js
+++ b/test/components/public-link/row.spec.js
@@ -14,14 +14,14 @@ const mountComponent = () => mount(PublicLinkRow, {
 describe('PublicLinkRow', () => {
   beforeEach(mockLogin);
 
-  it('shows the display name', () => {
+  it('shows the display name', async () => {
     testData.standardPublicLinks.createPast(1, {
       displayName: 'My Public Link'
     });
     const row = mountComponent();
     const span = row.get('.display-name span');
     span.text().should.equal('My Public Link');
-    span.attributes().title.should.equal('My Public Link');
+    await span.should.have.textTooltip();
   });
 
   describe('"Single Submission" column', () => {
@@ -51,7 +51,7 @@ describe('PublicLinkRow', () => {
         url.should.equal('http://localhost:9876/-/single/xyz?st=abc');
       });
 
-      it('indicates if the form does not have an enketoId', () => {
+      it('indicates if the form does not have an enketoId', async () => {
         testData.extendedForms.createPast(1, {
           enketoId: null,
           enketoOnceId: 'zyx'
@@ -62,7 +62,7 @@ describe('PublicLinkRow', () => {
         });
         const span = mountComponent().get('.access-link span');
         span.text().should.equal('Not available yet');
-        should.exist(span.attributes().title);
+        await span.should.have.tooltip('Public Access Link is not available yet. It has not finished being processed. Please refresh later and try again.');
       });
     });
 
@@ -80,7 +80,7 @@ describe('PublicLinkRow', () => {
         url.should.equal('http://localhost:9876/-/single/zyx?st=abc');
       });
 
-      it('indicates if the form does not have an enketoOnceId', () => {
+      it('indicates if the form does not have an enketoOnceId', async () => {
         testData.extendedForms.createPast(1, {
           enketoId: 'xyz',
           enketoOnceId: null
@@ -91,7 +91,7 @@ describe('PublicLinkRow', () => {
         });
         const span = mountComponent().get('.access-link span');
         span.text().should.equal('Not available yet');
-        should.exist(span.attributes().title);
+        await span.should.have.tooltip('Public Access Link is not available yet. It has not finished being processed. Please refresh later and try again.');
       });
     });
 
diff --git a/test/components/submission/activity.spec.js b/test/components/submission/activity.spec.js
index 868315da8..95aba9ef6 100644
--- a/test/components/submission/activity.spec.js
+++ b/test/components/submission/activity.spec.js
@@ -160,14 +160,15 @@ describe('SubmissionActivity', () => {
       component.find('#submission-activity-edit-button').exists().should.be.false();
     });
 
-    it('disables the button if the submission is encrypted', () => {
+    it('disables the button if the submission is encrypted', async () => {
       mockLogin();
       testData.extendedSubmissions.createPast(1, { status: 'notDecrypted' });
       testData.extendedAudits.createPast(1, { action: 'submission.create' });
       const component = mountComponent();
       const btn = component.get('#submission-activity-edit-button');
       btn.attributes('aria-disabled').should.equal('true');
-      btn.attributes().title.should.equal('You cannot edit encrypted Submissions.');
+      btn.should.have.ariaDescription('You cannot edit encrypted Submissions.');
+      await btn.should.have.tooltip();
     });
 
     it('sets the correct href attribute', () => {
diff --git a/test/components/submission/basic-details.spec.js b/test/components/submission/basic-details.spec.js
index fa9c5e7b6..a87b29b4d 100644
--- a/test/components/submission/basic-details.spec.js
+++ b/test/components/submission/basic-details.spec.js
@@ -21,23 +21,23 @@ const mountComponent = (options = undefined) =>
 
 describe('SubmissionBasicDetails', () => {
   beforeEach(() => {
-    mockLogin({ displayName: 'Alice' });
+    mockLogin({ displayName: 'Alice Allison' });
   });
 
-  it('shows the instance ID', () => {
-    testData.extendedSubmissions.createPast(1, { instanceId: 'foo' });
+  it('shows the instance ID', async () => {
+    testData.extendedSubmissions.createPast(1, { instanceId: 'foobar' });
     const span = mountComponent().get('dd span');
-    span.text().should.equal('foo');
-    span.attributes().title.should.equal('foo');
+    span.text().should.equal('foobar');
+    await span.should.have.textTooltip();
   });
 
-  it('shows the submitter', () => {
+  it('shows the submitter', async () => {
     testData.extendedSubmissions.createPast(1, {
       submitter: testData.extendedUsers.first()
     });
     const span = mountComponent().get('dl :nth-child(2) dd span');
-    span.text().should.equal('Alice');
-    span.attributes().title.should.equal('Alice');
+    span.text().should.equal('Alice Allison');
+    await span.should.have.textTooltip();
   });
 
   it('shows the submission date', () => {
@@ -94,11 +94,11 @@ describe('SubmissionBasicDetails', () => {
   });
 
   describe('device ID', () => {
-    it('shows the device ID', () => {
-      testData.extendedSubmissions.createPast(1, { deviceId: 'foo' });
+    it('shows the device ID', async () => {
+      testData.extendedSubmissions.createPast(1, { deviceId: 'foobar' });
       const span = mountComponent().get('dl :nth-child(6) dd span');
-      span.text().should.equal('foo');
-      span.attributes().title.should.equal('foo');
+      span.text().should.equal('foobar');
+      await span.should.have.textTooltip();
     });
 
     it('does not render if there is not a device ID', () => {
@@ -117,9 +117,7 @@ describe('SubmissionBasicDetails', () => {
           }
         }
       });
-      const span = component.get('dl :nth-child(6) dd span');
-      span.text().should.equal('Collect');
-      span.attributes().title.should.equal('Collect');
+      component.get('dl :nth-child(6) dd').text().should.equal('Collect');
     });
 
     it('does not render if there is not a user agent', () => {
diff --git a/test/components/submission/data-access.spec.js b/test/components/submission/data-access.spec.js
index a18c2a9f1..c02069d34 100644
--- a/test/components/submission/data-access.spec.js
+++ b/test/components/submission/data-access.spec.js
@@ -22,7 +22,7 @@ describe('SubmissionDataAccess', () => {
       component.emitted().analyze.should.eql([[]]);
     });
 
-    it('disables the button for an encrypted form without submissions', () => {
+    it('disables the button for an encrypted form without submissions', async () => {
       // The button should be disabled even if just the form, not the project,
       // has encryption enabled.
       testData.extendedForms.createPast(1, {
@@ -31,10 +31,11 @@ describe('SubmissionDataAccess', () => {
       });
       const button = mountComponent().get('button');
       button.attributes('aria-disabled').should.equal('true');
-      should.exist(button.attributes().title);
+      button.should.have.ariaDescription();
+      await button.should.have.tooltip();
     });
 
-    it('disables the button if there is a key', () => {
+    it('disables the button if there is a key', async () => {
       testData.extendedProjects.createPast(1, {
         forms: 2,
         lastSubmission: new Date().toISOString()
@@ -45,7 +46,8 @@ describe('SubmissionDataAccess', () => {
       testData.extendedSubmissions.createPast(1, { status: 'notDecrypted' });
       const button = mountComponent().get('button');
       button.attributes('aria-disabled').should.equal('true');
-      should.exist(button.attributes().title);
+      button.should.have.ariaDescription();
+      await button.should.have.tooltip();
     });
   });
 });
diff --git a/test/components/submission/data-row.spec.js b/test/components/submission/data-row.spec.js
index a59af1c5e..fa223cdbc 100644
--- a/test/components/submission/data-row.spec.js
+++ b/test/components/submission/data-row.spec.js
@@ -1,31 +1,49 @@
 import SubmissionDataRow from '../../../src/components/submission/data-row.vue';
+import SubmissionTable from '../../../src/components/submission/table.vue';
 
 import useFields from '../../../src/request-data/fields';
+import useSubmissions from '../../../src/request-data/submissions';
 
 import createTestContainer from '../../util/container';
 import testData from '../../data';
+import { mockRouter } from '../../util/router';
 import { mount } from '../../util/lifecycle';
 import { setLuxon } from '../../util/date-time';
 import { testRequestData } from '../../util/request-data';
 
 const mountComponent = (props = undefined) => {
+  const draft = props != null && props.draft === true;
   const container = createTestContainer({
-    requestData: testRequestData([useFields], {
-      fields: testData.extendedForms.last()._fields
-    })
+    requestData: testRequestData([useFields, useSubmissions], {
+      fields: testData.extendedForms.last()._fields,
+      odata: {
+        status: 200,
+        data: testData.submissionOData(),
+        config: {
+          url: !draft
+            ? '/v1/projects/1/forms/f.svc/Submissions'
+            : '/v1/projects/1/forms/f/draft.svc/Submissions'
+        }
+      }
+    }),
+    router: mockRouter(!draft
+      ? '/projects/1/forms/f/submissions'
+      : '/projects/1/forms/f/draft/testing')
   });
   const { fields } = container.requestData.localResources;
-  return mount(SubmissionDataRow, {
+  // Mounting SubmissionTable because it sets text-overflow for
+  // SubmissionDataRow.
+  const table = mount(SubmissionTable, {
     props: {
       projectId: '1',
       xmlFormId: 'f',
       draft: false,
-      submission: testData.submissionOData().value[0],
       fields: fields.data,
       ...props
     },
     container
   });
+  return table.getComponent(SubmissionDataRow);
 };
 
 describe('SubmissionDataRow', () => {
@@ -37,19 +55,19 @@ describe('SubmissionDataRow', () => {
     testData.extendedSubmissions.createPast(1, { s: null });
     const td = mountComponent().get('td');
     td.text().should.equal('');
-    should.not.exist(td.attributes().title);
   });
 
-  it('correctly formats a string value', () => {
+  it('correctly formats a string value', async () => {
     testData.extendedForms.createPast(1, {
       fields: [testData.fields.string('/s')],
       submissions: 1
     });
-    testData.extendedSubmissions.createPast(1, { s: 'foo' });
+    testData.extendedSubmissions.createPast(1, { s: 'foobar' });
     const td = mountComponent().get('td');
-    td.text().should.equal('foo');
-    td.attributes().title.should.equal('foo');
     td.classes().length.should.equal(0);
+    const span = td.get('span');
+    span.text().should.equal('foobar');
+    await span.should.have.textTooltip();
   });
 
   describe('int values', () => {
@@ -70,7 +88,8 @@ describe('SubmissionDataRow', () => {
       testData.extendedSubmissions.createPast(1, { i: 1000 });
       const td = mountComponent().get('td');
       td.text().should.equal('1,000');
-      td.attributes().title.should.equal('1,000');
+      // No tooltip
+      td.find('span').exists().should.be.false();
     });
   });
 
@@ -116,7 +135,8 @@ describe('SubmissionDataRow', () => {
         testData.extendedSubmissions.createPast(1, { d: rawValue });
         const td = mountComponent().get('td');
         td.text().should.equal(formattedValue);
-        td.attributes().title.should.equal(formattedValue);
+        // No tooltip
+        td.find('span').exists().should.be.false();
       });
     }
   });
@@ -143,7 +163,8 @@ describe('SubmissionDataRow', () => {
         testData.extendedSubmissions.createPast(1, { d: rawValue });
         const td = mountComponent().get('td');
         td.text().should.equal(formattedValue);
-        td.attributes().title.should.equal(formattedValue);
+        // No tooltip
+        td.find('span').exists().should.be.false();
       });
     }
   });
@@ -185,7 +206,8 @@ describe('SubmissionDataRow', () => {
 
         const td = mountComponent().get('td');
         td.text().should.equal(formattedValue);
-        td.attributes().title.should.equal(formattedValue);
+        // No tooltip
+        td.find('span').exists().should.be.false();
       });
     }
   });
@@ -227,22 +249,34 @@ describe('SubmissionDataRow', () => {
 
         const td = mountComponent().get('td');
         td.text().should.equal(formattedValue);
-        td.attributes().title.should.equal(formattedValue);
+        // No tooltip
+        td.find('span').exists().should.be.false();
       });
     }
   });
 
-  it('adds the geopoint-field class for a geopoint value', () => {
-    testData.extendedForms.createPast(1, {
-      fields: [testData.fields.geopoint('/g')],
-      submissions: 1
+  describe('geopoint values', () => {
+    it('adds the geopoint-field class', () => {
+      testData.extendedForms.createPast(1, {
+        fields: [testData.fields.geopoint('/g')],
+        submissions: 1
+      });
+      testData.extendedSubmissions.createPast(1);
+      mountComponent().get('td').classes('geopoint-field').should.be.true();
+    });
+
+    it('does not render a <span> element for a tooltip', () => {
+      testData.extendedForms.createPast(1, {
+        fields: [testData.fields.geopoint('/g')],
+        submissions: 1
+      });
+      testData.extendedSubmissions.createPast(1);
+      mountComponent().get('td').find('span').exists().should.be.false();
     });
-    testData.extendedSubmissions.createPast(1);
-    mountComponent().get('td').classes('geopoint-field').should.be.true();
   });
 
   describe('binary field', () => {
-    it("correctly renders a field of type 'binary'", () => {
+    it("correctly renders a field of type 'binary'", async () => {
       testData.extendedForms.createPast(1, {
         fields: [testData.fields.binary('/b')],
         submissions: 1
@@ -253,10 +287,10 @@ describe('SubmissionDataRow', () => {
       });
       const td = mountComponent().get('td');
       td.classes('binary-field').should.be.true();
-      should.not.exist(td.attributes().title);
       const a = td.get('a');
       const { href } = a.attributes();
       href.should.equal('/v1/projects/1/forms/f/submissions/a%20b/attachments/c%20d.jpg');
+      await a.should.have.tooltip('File was submitted. Click to download.');
       a.find('.icon-check').exists().should.be.true();
       a.find('.icon-download').exists().should.be.true();
     });
@@ -299,7 +333,6 @@ describe('SubmissionDataRow', () => {
     const td = mountComponent().findAll('td');
     td.length.should.equal(2);
     td[1].text().should.equal('foo');
-    td[1].attributes().title.should.equal('foo');
   });
 
   it('renders a cell for each field', () => {
diff --git a/test/components/submission/decrypt.spec.js b/test/components/submission/decrypt.spec.js
index bcf53823e..f30668864 100644
--- a/test/components/submission/decrypt.spec.js
+++ b/test/components/submission/decrypt.spec.js
@@ -62,37 +62,43 @@ describe('SubmissionDownload', () => {
   });
 
   describe('splitSelectMultiples checkbox', () => {
-    it('enables the checkbox if the form has a select_multiple field', () => {
+    it('enables the checkbox if the form has a select_multiple field', async () => {
       testData.extendedForms.createPast(1, {
         fields: [testData.fields.selectMultiple('/sm')]
       });
       const checkbox = mountComponent().get('.checkbox');
       checkbox.classes('disabled').should.be.false();
-      checkbox.get('input').element.disabled.should.be.false();
-      should.not.exist(checkbox.get('label').attributes().title);
+      const input = checkbox.get('input');
+      input.element.disabled.should.be.false();
+      input.should.not.have.ariaDescription();
+      await checkbox.get('label').should.not.have.tooltip();
     });
 
-    it('disables checkbox if form does not have a select_multiple field', () => {
+    it('disables checkbox if form does not have a select_multiple field', async () => {
       testData.extendedForms.createPast(1, {
         fields: [testData.fields.int('/i')]
       });
       const checkbox = mountComponent().get('.checkbox');
       checkbox.classes('disabled').should.be.true();
-      checkbox.get('input').element.disabled.should.be.true();
-      const { title } = checkbox.get('label').attributes();
-      title.should.equal('This Form does not have any select multiple fields.');
+      const input = checkbox.get('input');
+      input.element.disabled.should.be.true();
+      input.should.have.ariaDescription('This Form does not have any select multiple fields.');
+      const label = checkbox.get('label');
+      await label.should.have.tooltip('This Form does not have any select multiple fields.');
     });
 
-    it('disables the checkbox if the form is encrypted', () => {
+    it('disables the checkbox if the form is encrypted', async () => {
       testData.extendedForms.createPast(1, {
         fields: [testData.fields.selectMultiple('/sm')],
         key: testData.standardKeys.createPast(1, { managed: false }).last()
       });
       const checkbox = mountComponent().get('.checkbox');
       checkbox.classes('disabled').should.be.true();
-      checkbox.get('input').element.disabled.should.be.true();
-      const { title } = checkbox.get('label').attributes();
-      title.should.equal('Encrypted Forms cannot be processed in this way.');
+      const input = checkbox.get('input');
+      input.element.disabled.should.be.true();
+      input.should.have.ariaDescription('Encrypted Forms cannot be processed in this way.');
+      const label = checkbox.get('label');
+      await label.should.have.tooltip('Encrypted Forms cannot be processed in this way.');
     });
 
     it('includes splitSelectMultiples in each download link', async () => {
@@ -132,7 +138,7 @@ describe('SubmissionDownload', () => {
         url.searchParams.get('deletedFields').should.equal('true');
     });
 
-    it('disables the checkbox for a form draft', () => {
+    it('disables the checkbox for a form draft', async () => {
       testData.extendedForms.createPast(1);
       testData.extendedFormVersions.createPast(1, { draft: true });
       const modal = mountComponent({
@@ -140,9 +146,14 @@ describe('SubmissionDownload', () => {
       });
       const checkbox = modal.findAll('.checkbox')[2];
       checkbox.classes('disabled').should.be.true();
-      checkbox.get('input').element.disabled.should.be.true();
-      const { title } = checkbox.get('label').attributes();
-      title.should.equal('Draft Forms cannot be processed in this way.');
+      const input = checkbox.get('input');
+      input.element.disabled.should.be.true();
+      input.should.have.ariaDescriptions([
+        'Use this option if you need to see fields referenced in previous Form versions.',
+        'Draft Forms cannot be processed in this way.'
+      ]);
+      const label = checkbox.get('label');
+      await label.should.have.tooltip('Draft Forms cannot be processed in this way.');
     });
   });
 
@@ -251,32 +262,30 @@ describe('SubmissionDownload', () => {
   });
 
   describe('download link for all data tables', () => {
-    it('enables the link if the form has a repeat group', () => {
+    it('enables the link if the form has a repeat group', async () => {
       testData.extendedForms.createPast(1, {
         fields: [testData.fields.repeat('/r'), testData.fields.int('/r/i')]
       });
       const modal = mountComponent();
       const action = modal.findAll('.submission-download-action')[1];
       action.classes('disabled').should.be.false();
-      const label = action.get('.submission-download-action-label');
-      should.not.exist(label.attributes().title);
       const a = action.get('a');
       a.classes('disabled').should.be.false();
-      should.not.exist(a.attributes().title);
+      a.should.not.have.ariaDescription();
+      await a.should.not.have.tooltip();
     });
 
-    it('disables the link if the form does not have a repeat group', () => {
+    it('disables the link if the form does not have a repeat group', async () => {
       testData.extendedForms.createPast(1, {
         fields: [testData.fields.int('/i')]
       });
       const modal = mountComponent();
       const action = modal.findAll('.submission-download-action')[1];
       action.classes('disabled').should.be.true();
-      const label = action.get('.submission-download-action-label');
-      label.attributes().title.should.equal('This Form does not have repeats.');
       const a = action.get('a');
       a.classes('disabled').should.be.true();
-      a.attributes().title.should.equal('This Form does not have repeats.');
+      a.should.have.ariaDescription('This Form does not have repeats.');
+      await a.should.have.tooltip();
     });
   });
 
diff --git a/test/components/submission/diff-item.spec.js b/test/components/submission/diff-item.spec.js
index 8a3d7fce6..1c7d7ec2e 100644
--- a/test/components/submission/diff-item.spec.js
+++ b/test/components/submission/diff-item.spec.js
@@ -70,14 +70,14 @@ describe('SubmissionDiffItem', () => {
     component.get('.field-name').text().should.equal('name');
   });
 
-  it('shows field names as tooltips', () => {
+  it('shows field names as tooltips', async () => {
     const diff = {
       new: 'b',
       old: 'a',
       path: ['this_is_a_really_long_field_that_wont_fit']
     };
     const component = mountComponent(diff);
-    component.get('.field-name').attributes('title').should.equal('this_is_a_really_long_field_that_wont_fit');
+    await component.get('.field-name').should.have.textTooltip();
   });
 
   it('shows an old value of added field as "empty"', () => {
diff --git a/test/components/submission/feed-entry.spec.js b/test/components/submission/feed-entry.spec.js
index 21d9c3b2a..4611577ec 100644
--- a/test/components/submission/feed-entry.spec.js
+++ b/test/components/submission/feed-entry.spec.js
@@ -175,7 +175,7 @@ describe('SubmissionFeedEntry', () => {
     });
 
     describe('entity.create.error audit', () => {
-      it('renders entity creation error message and help text', () => {
+      it('renders entity creation error message and help text', async () => {
         testData.extendedAudits.createPast(1, {
           action: 'entity.create.error',
           details: { problem: { problemCode: 409.14, problemDetails: { reason: 'ID empty or missing.' } } }
@@ -183,7 +183,7 @@ describe('SubmissionFeedEntry', () => {
         const title = mountComponent().get('.title');
         title.get('.submission-feed-entry-entity-error').text().should.equal('Problem creating Entity');
         title.get('.entity-error-message').text().should.equal('ID empty or missing.');
-        title.get('.entity-error-message').attributes().title.should.equal('ID empty or missing.');
+        await title.get('.entity-error-message').should.have.textTooltip();
       });
     });
   });
diff --git a/test/components/submission/field-dropdown.spec.js b/test/components/submission/field-dropdown.spec.js
index 069b98e61..447248044 100644
--- a/test/components/submission/field-dropdown.spec.js
+++ b/test/components/submission/field-dropdown.spec.js
@@ -38,19 +38,19 @@ describe('SubmissionFieldDropdown', () => {
     const s2 = fields.find(field => field.name === 's2');
     const s3 = fields.find(field => field.name === 's3');
     options.should.eql([
-      { value: s2, key: '/s2', text: 's2', title: 's2' },
-      { value: s3, key: '/s3', text: 's3', title: 's3' }
+      { value: s2, key: '/s2', text: 's2', description: 's2' },
+      { value: s3, key: '/s3', text: 's3', description: 's3' }
     ]);
   });
 
-  it('includes the group name in the option title', () => {
+  it('includes the group name in the option description', () => {
     const component = mountComponent({
       container: {
         requestData: { fields: [group('/g'), string('/g/s1')] }
       }
     });
     const { options } = component.getComponent(Multiselect).props();
-    options[0].title.should.equal('g-s1');
+    options[0].description.should.equal('g-s1');
   });
 
   it('shows a warning if more than 100 fields are selected', async () => {
diff --git a/test/components/submission/metadata-row.spec.js b/test/components/submission/metadata-row.spec.js
index bf963cb0f..d88c4e5f5 100644
--- a/test/components/submission/metadata-row.spec.js
+++ b/test/components/submission/metadata-row.spec.js
@@ -43,14 +43,14 @@ describe('SubmissionMetadataRow', () => {
   });
 
   describe('submitter name', () => {
-    it('shows the submitter name for a form', () => {
-      mockLogin({ displayName: 'Alice' });
+    it('shows the submitter name for a form', async () => {
+      mockLogin({ displayName: 'Alice Allison' });
       testData.extendedSubmissions.createPast(1);
       const row = mountComponent({ draft: false });
       const td = row.findAll('td')[1];
       td.classes('submitter-name').should.be.true();
-      td.text().should.equal('Alice');
-      td.attributes().title.should.equal('Alice');
+      td.text().should.equal('Alice Allison');
+      await td.get('span').should.have.textTooltip();
     });
 
     it('does not show the submitter name for a form draft', () => {
@@ -206,7 +206,7 @@ describe('SubmissionMetadataRow', () => {
   });
 
   describe('edit button', () => {
-    it('sets the correct href attribute', () => {
+    it('sets the correct href attribute', async () => {
       testData.extendedForms.createPast(1, {
         xmlFormId: 'a b',
         submissions: 1
@@ -216,18 +216,19 @@ describe('SubmissionMetadataRow', () => {
       href.should.equal('/v1/projects/1/forms/a%20b/submissions/c%20d/edit');
     });
 
-    it('sets the correct title attribute', () => {
+    it('sets the correct ARIA label', async () => {
       testData.extendedSubmissions.createPast(1, { edits: 1000 });
-      const { title } = mountComponent().findAll('.btn')[1].attributes();
-      title.should.equal('Edit (1,000)');
+      const btn = mountComponent().findAll('.btn')[1];
+      btn.attributes('aria-label').should.equal('Edit (1,000)');
+      await btn.should.have.tooltip('Edit (1,000)');
     });
 
-    it('disables the button if the submission is encrypted', () => {
+    it('disables the button if the submission is encrypted', async () => {
       testData.extendedSubmissions.createPast(1, { status: 'notDecrypted' });
       const button = mountComponent().findAll('.btn')[1];
       button.attributes('aria-disabled').should.equal('true');
-      const { title } = button.attributes();
-      title.should.equal('You cannot edit encrypted Submissions.');
+      button.should.have.ariaDescription('You cannot edit encrypted Submissions.');
+      await button.should.have.tooltip('You cannot edit encrypted Submissions.');
     });
   });
 
diff --git a/test/components/user/list.spec.js b/test/components/user/list.spec.js
index 3a565d9c7..f3a2fa63e 100644
--- a/test/components/user/list.spec.js
+++ b/test/components/user/list.spec.js
@@ -9,7 +9,7 @@ import { mockLogin } from '../../util/session';
 
 describe('UserList', () => {
   beforeEach(() => {
-    mockLogin({ email: 'a@email.com', displayName: 'Alice' });
+    mockLogin({ email: 'a@email.com', displayName: 'Alice Allison' });
   });
 
   it('sends the correct initial requests', () =>
@@ -23,16 +23,16 @@ describe('UserList', () => {
     const link = component.getComponent(UserRow).getComponent(RouterLinkStub);
     should.exist(link.element.closest('.display-name'));
     link.props().to.should.equal('/users/1/edit');
-    link.text().should.equal('Alice');
-    link.attributes().title.should.equal('Alice');
+    link.text().should.equal('Alice Allison');
+    await link.should.have.textTooltip();
   });
 
-  it('shows the email', () =>
-    load('/users', { root: false }).then(component => {
-      const td = component.get('.user-row .email');
-      td.text().should.equal('a@email.com');
-      td.attributes().title.should.equal('a@email.com');
-    }));
+  it('shows the email', async () => {
+    const component = await load('/users', { root: false });
+    const span = component.get('.user-row .email span');
+    span.text().should.equal('a@email.com');
+    await span.should.have.textTooltip();
+  });
 
   it('correctly renders the edit profile action', async () => {
     const component = await load('/users', { root: false });
@@ -62,8 +62,10 @@ describe('UserList', () => {
     selects[0].attributes('aria-disabled').should.equal('true');
     selects[1].attributes('aria-disabled').should.equal('false');
 
-    should.exist(selects[0].attributes().title);
-    should.not.exist(selects[1].attributes().title);
+    selects[0].should.have.ariaDescription('You may not edit your own Sitewide Role.');
+    await selects[0].should.have.tooltip();
+    selects[1].should.not.have.ariaDescription();
+    await selects[1].should.not.have.tooltip();
   });
 
   describe('changing a role', () => {
diff --git a/test/components/user/retire.spec.js b/test/components/user/retire.spec.js
index 49f6c4b45..a1ed07d18 100644
--- a/test/components/user/retire.spec.js
+++ b/test/components/user/retire.spec.js
@@ -23,9 +23,9 @@ describe('UserRetire', () => {
     it('is disabled for the current user', async () => {
       const component = await load('/users', { root: false });
       const a = component.get('.user-row .retire-user');
-      const li = a.element.parentNode;
-      li.classList.contains('disabled').should.be.true();
-      li.getAttribute('title').should.equal('You may not retire yourself.');
+      a.element.parentNode.classList.contains('disabled').should.be.true();
+      a.should.have.ariaDescription('You may not retire yourself.');
+      await a.should.have.tooltip();
     });
   });
 
diff --git a/test/util/lifecycle.js b/test/util/lifecycle.js
index 82388f0a9..6a4424024 100644
--- a/test/util/lifecycle.js
+++ b/test/util/lifecycle.js
@@ -2,6 +2,7 @@ import { last, lensPath, view } from 'ramda';
 import { mount as vtuMount } from '@vue/test-utils';
 
 import { noop } from '../../src/util/util';
+import vTooltip from '../../src/directives/tooltip';
 
 import createTestContainer from './container';
 
@@ -25,6 +26,7 @@ export const mount = (component, options = {}) => {
     ? containerOption
     : createTestContainer(containerOption);
   g.plugins = g.plugins != null ? [container, ...g.plugins] : [container];
+  g.directives = { tooltip: vTooltip, ...g.directives };
   g.mocks = { $container: container, ...g.mocks };
   return vtuMount(component, { ...mountOptions, global: g });
 };