diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 4514ce832..61ed9132c 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -26,7 +26,7 @@
 
 		<div v-if="card.commentsUnread > 0" class="icon icon-comment" />
 
-		<div v-if="card.duedate" :class="dueIcon">
+		<div v-if="card.duedate" v-tooltip="dueDateTooltip" :class="dueIcon">
 			<span>{{ dueTime }}</span>
 		</div>
 
@@ -41,6 +41,7 @@
 </template>
 <script>
 import AvatarList from './AvatarList'
+import moment from '@nextcloud/moment'
 
 export default {
 	name: 'CardBadges',
@@ -70,6 +71,9 @@ export default {
 		card() {
 			return this.$store.getters.cardById(this.id)
 		},
+		dueDateTooltip() {
+			return moment(this.card.duedate).format('LLLL')
+		},
 	},
 	created() {
 		this.updateDueTime()
diff --git a/src/main.js b/src/main.js
index 6d8386747..7f9548065 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,7 +26,7 @@ import store from './store/main'
 import { sync } from 'vuex-router-sync'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { generateFilePath } from '@nextcloud/router'
-import Tooltip from '@nextcloud/vue'
+import { Tooltip } from '@nextcloud/vue'
 import ClickOutside from 'vue-click-outside'
 import './models'