diff --git a/addons/mail/static/src/js/thread_widget.js b/addons/mail/static/src/js/thread_widget.js
index bf49857d96c..03b3706892d 100644
--- a/addons/mail/static/src/js/thread_widget.js
+++ b/addons/mail/static/src/js/thread_widget.js
@@ -79,12 +79,19 @@ var ThreadWidget = Widget.extend({
         };
         this._selectedMessageID = null;
         this._currentThreadID = null;
+        this._messageMailPopover = null;
     },
     /**
+     * The message mail popover may still be shown at this moment. If we do not
+     * remove it, it stays visible on the page until a page reload.
+     *
      * @override
      */
     destroy: function () {
         clearInterval(this._updateTimestampsInterval);
+        if (this._messageMailPopover) {
+            this._messageMailPopover.popover('hide');
+        }
     },
     /**
      * @param {mail.model.AbstractThread} thread the thread to render.
@@ -195,6 +202,8 @@ var ThreadWidget = Widget.extend({
                 self._updateTimestamps();
             }, 1000*60);
         }
+
+        this._renderMessageMailPopover(messages);
     },
 
     //--------------------------------------------------------------------------
@@ -419,6 +428,36 @@ var ThreadWidget = Widget.extend({
             this.trigger('redirect', options.model, options.id);
         }
     }, 500, true),
+    /**
+     * Render the popover when mouse-hovering on the mail icon of a message
+     * in the thread. There is at most one such popover at any given time.
+     *
+     * @private
+     * @param {mail.model.AbstractMessage[]} messages list of messages in the
+     *   rendered thread, for which popover on mouseover interaction is
+     *   permitted.
+     */
+    _renderMessageMailPopover: function (messages) {
+        if (this._messageMailPopover) {
+            this._messageMailPopover.popover('hide');
+        }
+        this._messageMailPopover = this.$('.o_thread_tooltip').popover({
+            html: true,
+            boundary: 'viewport',
+            placement: 'auto',
+            trigger: 'hover',
+            offset: '0, 1',
+            content: function () {
+                var messageID = $(this).data('message-id');
+                var message = _.find(messages, function (message) {
+                    return message.getID() === messageID;
+                });
+                return QWeb.render('mail.widget.Thread.Message.MailTooltip', {
+                    data: message.getCustomerEmailData()
+                });
+            },
+        });
+    },
     /**
      * @private
      */
diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss
index 46ac09a932b..c1922747177 100644
--- a/addons/mail/static/src/scss/thread.scss
+++ b/addons/mail/static/src/scss/thread.scss
@@ -36,28 +36,6 @@
     .o_thread_tooltip_container {
         display: inline;
         position: relative;
-
-        .o_thread_tooltip_content {
-            top: 10px;
-            background: gray('200');
-            padding: 4px;
-            border: solid gray('200') 1px;
-            border-radius: 5px;
-            color: gray;
-            width: 300px;
-            display: none;
-            opacity: 0;
-            position: absolute;
-            transition: opacity 0.5s;
-            i.fa-exclamation {
-                color: red;
-            }
-        }
-
-        .o_thread_tooltip:hover + .o_thread_tooltip_content {
-            display: inline;
-            opacity: 1;
-        }
     }
 
     .o_thread_date_separator {
@@ -235,28 +213,6 @@
             .o_thread_tooltip_container {
                 display: inline;
                 position: relative;
-
-                .o_thread_tooltip_content {
-                    top: 10px;
-                    background: theme-color('light');
-                    padding: 4px;
-                    border: solid theme-color('light') 1px;
-                    border-radius: 5px;
-                    color: gray;
-                    width: 300px;
-                    display: none;
-                    opacity: 0;
-                    position: absolute;
-                    transition: opacity 0.5s;
-                    i.fa-exclamation {
-                        color: red;
-                    }
-                }
-
-                .o_thread_tooltip:hover + .o_thread_tooltip_content {
-                    display: inline;
-                    opacity: 1;
-                }
             }
         }
     }
@@ -278,6 +234,10 @@
     }
 }
 
+.o_web_client .popover .o_thread_tooltip_icon {
+    min-width: 1rem;
+}
+
 .o_web_client.o_touch_device {
     .o_mail_thread .o_thread_icon {
         opacity: $o-mail-thread-icon-opacity;
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index d88418ee921..242e97449f5 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -315,19 +315,6 @@
                             <t t-set="fatype" t-value="'-o'"/>
                         </t>
                         <i t-att-class="'o_thread_tooltip o_thread_message_email o_thread_message_email_' + message.getCustomerEmailStatus() + ' fa fa-envelope-o'" t-att-data-message-id="message.getID()"/>
-                        <span class="o_thread_tooltip_content">
-                            <t t-foreach="message.getCustomerEmailData()" t-as="customerEmailData">
-                                <span>
-                                    <t t-if="customerEmailData[2] === 'sent'"><i class='fa fa-check' title="Sent" role="img" aria-label="Sent"/></t>
-                                    <t t-if="customerEmailData[2] === 'bounce'"><i class='fa fa-exclamation' title="Bounced" role="img" aria-label="Bounced"/></t>
-                                    <t t-if="customerEmailData[2] === 'exception'"><i class='fa fa-exclamation' title="Error" role="img" aria-label="Error"/></t>
-                                    <t t-if="customerEmailData[2] === 'ready'"><i class='fa fa-send-o' title="Ready" role="img" aria-label="Ready"/></t>
-                                    <t t-if="customerEmailData[2] === 'canceled'"><i class='fa fa-trash-o' title="Canceled" role="img" aria-label="Canceled"/></t>
-                                    <t t-esc="customerEmailData[1]"/>
-                                </span>
-                                <br />
-                            </t>
-                        </span>
                     </span>
                     <span t-attf-class="o_thread_icons">
                         <i t-if="options.displayStars and !message.isSystemNotification() and !message.needsModeration()"
@@ -381,6 +368,24 @@
         </t>
     </t>
 
+    <!--
+        @param {Object[]|undefined} list of customer email data of a given message.
+           A customer email data is a list with the following format:
+           [partnerID, partnerName, emailStatus]
+    -->
+    <t t-name="mail.widget.Thread.Message.MailTooltip">
+        <div t-foreach="data" t-as="customerEmailData">
+            <span class="d-inline-block text-center o_thread_tooltip_icon">
+                <i t-if="customerEmailData[2] === 'sent'" class='fa fa-check' title="Sent" role="img" aria-label="Sent"/>
+                <i t-if="customerEmailData[2] === 'bounce'" class='fa fa-exclamation text-danger' title="Bounced" role="img" aria-label="Bounced"/>
+                <i t-if="customerEmailData[2] === 'exception'" class='fa fa-exclamation text-danger' title="Error" role="img" aria-label="Error"/>
+                <i t-if="customerEmailData[2] === 'ready'" class='fa fa-send-o' title="Ready" role="img" aria-label="Ready"/>
+                <i t-if="customerEmailData[2] === 'canceled'" class='fa fa-trash-o' title="Canceled" role="img" aria-label="Canceled"/>
+            </span>
+            <span t-esc="customerEmailData[1]"/>
+        </div>
+    </t>
+
     <!--
         @param {mail.model.Message} message
     -->