diff --git a/components/Opinion.vue b/components/Opinion.vue
index bd1c5543..9763645a 100644
--- a/components/Opinion.vue
+++ b/components/Opinion.vue
@@ -1,22 +1,30 @@
 <template>
     <span>
         <strong v-if="opinion === 1">
-            <img src="../node_modules/@fortawesome/fontawesome-pro/svgs/solid/heart.svg" :aria-label="$t('profile.opinion.yes')" class="icon invertible"/>
+            <Tooltip :text="$t('profile.opinion.yes')">
+                <img src="../node_modules/@fortawesome/fontawesome-pro/svgs/solid/heart.svg" class="icon invertible"/>
+            </Tooltip>
             <nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link>
             <span v-else><Spelling escape :text="word"/></span>
         </strong>
         <span v-else-if="opinion === 2">
-            <Icon v="grin-tongue" :aria-label="$t('profile.opinion.jokingly')"/>
+            <Tooltip :text="$t('profile.opinion.jokingly')">
+                <Icon v="grin-tongue"/>
+            </Tooltip>
             <nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link>
             <span v-else><Spelling escape :text="word"/></span>
         </span>
         <span v-else-if="opinion === 0">
-            <Icon v="thumbs-up" :aria-label="$t('profile.opinion.meh')"/>
+            <Tooltip :text="$t('profile.opinion.meh')">
+                <Icon v="thumbs-up"/>
+            </Tooltip>
             <nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link>
             <span v-else><Spelling escape :text="word"/></span>
         </span>
         <span v-else-if="opinion === -1" class="text-muted small">
-            <Icon v="thumbs-down" :aria-label="$t('profile.opinion.no')"/>
+            <Tooltip :text="$t('profile.opinion.no')">
+                <Icon v="thumbs-down"/>
+            </Tooltip>
             <nuxt-link v-if="link" :to="link"><Spelling escape :text="word"/></nuxt-link>
             <span v-else><Spelling escape :text="word"/></span>
         </span>
diff --git a/components/OpinionListInput.vue b/components/OpinionListInput.vue
index 459ebafd..8589c97f 100644
--- a/components/OpinionListInput.vue
+++ b/components/OpinionListInput.vue
@@ -3,27 +3,31 @@
         <template v-slot="s">
             <button type="button" :class="['btn', parseInt(s.val.value) === 1 ? 'btn-primary' : 'btn-outline-secondary']"
                     :aria-label="$t('profile.opinion.yes')"
-                    :title="$t('profile.opinion.yes')"
                     @click="s.update({key: s.val.key, value: 1})">
-                <Icon v="heart"/>
+                <Tooltip :text="$t('profile.opinion.yes')">
+                    <Icon v="heart"/>
+                </Tooltip>
             </button>
             <button type="button" :class="['btn', parseInt(s.val.value) === 2 ? 'btn-primary' : 'btn-outline-secondary']"
                     :aria-label="$t('profile.opinion.jokingly')"
-                    :title="$t('profile.opinion.jokingly')"
                     @click="s.update({key: s.val.key, value: 2})">
-                <Icon v="grin-tongue"/>
+                <Tooltip :text="$t('profile.opinion.jokingly')">
+                    <Icon v="grin-tongue"/>
+                </Tooltip>
             </button>
             <button type="button" :class="['btn', parseInt(s.val.value) === 0 ? 'btn-primary' : 'btn-outline-secondary']"
                     :aria-label="$t('profile.opinion.meh')"
-                    :title="$t('profile.opinion.meh')"
                     @click="s.update({key: s.val.key, value: 0})">
-                <Icon v="thumbs-up"/>
+                <Tooltip :text="$t('profile.opinion.meh')">
+                    <Icon v="thumbs-up"/>
+                </Tooltip>
             </button>
             <button type="button" :class="['btn', parseInt(s.val.value) === -1 ? 'btn-primary' : 'btn-outline-secondary']"
                     :aria-label="$t('profile.opinion.no')"
-                    :title="$t('profile.opinion.no')"
                     @click="s.update({key: s.val.key, value: -1})">
-                <Icon v="thumbs-down"/>
+                <Tooltip :text="$t('profile.opinion.no')">
+                    <Icon v="thumbs-down"/>
+                </Tooltip>
             </button>
             <input v-model="s.val.key" :class="['form-control', 'mw-input', invalid(s.val) ? 'border-danger' : '']" @keyup="s.update(s.val)" required/>
         </template>
diff --git a/components/Tooltip.vue b/components/Tooltip.vue
new file mode 100644
index 00000000..a72bf9bf
--- /dev/null
+++ b/components/Tooltip.vue
@@ -0,0 +1,35 @@
+<template>
+    <span class="tooltip-wrapper" :title="text" :aria-label="text">
+        <slot></slot>
+        <span class="tooltip-content bg-dark text-white border px-2 py-1 rounded">
+            {{ text }}
+        </span>
+    </span>
+</template>
+
+<script>
+    export default {
+        props: {
+            text: { required: true },
+        },
+    }
+</script>
+
+<style lang="scss">
+    .tooltip-wrapper {
+        position: relative;
+        .tooltip-content {
+            display: none;
+            position: absolute;
+            top: -2.2rem;
+            left: -50%;
+            font-weight: normal;
+            font-size: .85rem;
+        }
+        &:hover {
+            .tooltip-content {
+                display: block;
+            }
+        }
+    }
+</style>