Home > Back-end >  Hidden text to display on user interaction - Outlook 2016
Hidden text to display on user interaction - Outlook 2016

Time:08-24

I have an email which is going out to a small team of people.
The email contains a table with each row having a "short description" column.
I would like to include the "full description", however but there is too much data to put this as a new column in the same table.

Ideally I would like to be able to hover over the row and view the "full description" as a tooltip.
I have tried using the title attribute, but it seems this is not supported.

Does Outlook support any method in which data is hidden initially, and some action of the user can display it?

The recipients of this are internal to the company I work for, so I only care about this working on Outlook 2016 under Windows.

CodePudding user response:

Sounds like you just need a tooltip for your data in the table. See How To Create Tooltips in HTML for more information.

The Outlook extensibility model doesn't provide anything for that out of the box. Be aware, Outlook uses Word for rendering message bodies, so not all modern HTML markup could be working correctly. You can find the list of supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.

CodePudding user response:

This is not supported, as Outlook for Windows desktops is rendered almost as if it were for printing. There is basically no dynamic part to it.

When you hover your mouse over a link, it pulls the href out and displays that in a tooltip, along with "Click or tap to follow link", but that's all. That's not controllable except by changing the href.

Interestingly, it does support local anchors (with corresponding name attribute, not id): https://www.caniemail.com/features/html-anchor-links/

So the table could say "more" and link to a further description below.

Untested but I think this is the gist, for Outlook. Being Outlook-only, I've added conditionals so other email clients won't see a broken link:

<!--[if mso]><a href="#description1">more</a><![endif]-->

<!--[if mso]><a name="description1">This is your in-depth description</a><![endif]-->

If you then wanted to show something else for non-Outlooks, you can use the "if not Outlook" conditional:

<!--[if !mso]><!-->
    ...
<!--<![endif]-->
  • Related