HTML5 Emails - iOS - Disable word suggestion?

Question

I'm not sure if I am searching for the correct thing but within a HTML5 email that I am sending out I have the following line:-

<h3>IS THAT THE SOUND OF SLEIGH BELLS?</h3>

And on my iPhone 7 Sleigh Bells is a clickable link which shows suggestions like the at the bottom.

I have tried wrapping the h3 with span tags, I have added the following CSS:-

[x-apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

Which just styles the text to not look like a link but it is still clickable.

I have also tried adding the following line:-

<tag autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"/>

But so far I've not managed to find out a way to make this word/phrase not clickable, anybody have any idea?

Answer 1

As per my comment above (I haven't tested this but it was confirmed working by OP), adding the following CSS style to the element works to disable the link tap behaviour on iOS devices.

pointer-events: none;

It's possible this has to be added via the iOS-specific CSS rules mentioned in the question:

[x-apple-data-detectors]

Answer 2

I know this answer was solved already, but I wanted to offer a fix for other email clients that have problems with data detectors, Gmail and Windows 10 Mail.

In Gmail, this phone number gets a blue underline and changes to blue, even with the Apple Data detector fix in place. In addition, Windows 10 Mail places a black dotted line under the word Monday:

800-422-4234 Monday through Friday, 8 a.m. to 9 p.m. Eastern Time.

I added ‌, a non-printing character into the 800 number and in the word Monday. I placed the ‌ between after the Mo because Mon Windows 10 Mail recognizes Mon as an abbreviation for Monday and it underlines Mon.

800-422-42‌34 Mo‌nday through Friday, 8 a.m. to 9 p.m. Eastern Time.

This fixes the data detection with Gmail and fixes the Monday problem in Windows 10 Mail, but then it underlines the word Friday. So I did the same fix:

800-422-42‌34 Mo‌nday through Fr‌iday, 8 a.m. to 9 p.m. Eastern Time.

This fixes the data detection issue in every major email client I tested. This is how I am using the Apple Data Detection:

<style>
  [x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}
</style>

I hope this helps others facing data detection issues with phone numbers and dates.

Good luck.