How to add MouseOver to HTML Email Table

[joeschmuck]

This is definitely an Off-Topic question and I was planning to ask it on a few other sites when I thought to myself, there are a lot of programmers here, some I'm sure have very good HTML experience.

So my question is: How can I add a mouseover event to an HTML email? I am able to generate an HTML code that displays mouseover events correctly in a web browser but not an Email. I'm not an expert at this and my luck at finding something on the internet has puttered out. I'm about to just give up but I need to ask to see if someone is able to help me out.

As many of you know, I'm maintaining the Multi-Report script and in there is a few tables that are generated. When there is a value that gets overridden back to zero I change the background color to a light yellow to indicate this value is not actually zero. An example is UDMA_CRC_ERROR_COUNT which as we all know, are permanently stored on a hard drive even after you fix the problem. So in the script we zero (normalize) it out so we can clearly see if more errors occur in the future. I have a single hard drive that I have 15 CRC errors, then I fixed the SATA data cable and they stopped.

What I'm trying to do now is update the script so that in the email, when we mouseover the yellow area that the actual value will pop up. So when I mouseover the yellow background with a "0" displayed, a popup of "15" will be displayed.

Below is part of the script in question and I'm including the entire script as an attached file. Please note that this is not a final released script, I'm making a lot of minor changes and I have not tested it out very well. I just don't want someone to think they are getting an advanced copy, it's not ready for that, but it does work in general.

The code below is just for how I handle the creation of the crc errors cell. It comes from line 1989 in the script.

Code:

if [[ $crcErrorsColor != $ovrdColor ]] && [[ $Mouseover == "true" ]]; then
   if [[ "$1" == "HDD" ]] && [[ "$HDD_UDMA_CRC_Errors" == "true" ]]; then printf "<td style=\"text-align:center; background-color:%s; height:25px; border:1px solid black; border-collapse:collapse; font-family:courier;\">%s</td>\n" "$crcErrorsColor" "$crcErrors"; fi
   if [[ "$1" == "SSD" ]] && [[ "$SSD_UDMA_CRC_Errors" == "true" ]]; then printf "<td style=\"text-align:center; background-color:%s; height:25px; border:1px solid black; border-collapse:collapse; font-family:courier;\">%s</td>\n" "$crcErrorsColor" "$crcErrors"; fi
else
   if [[ "$1" == "HDD" ]] && [[ "$HDD_UDMA_CRC_Errors" == "true" ]]; then printf "<td style=\"text-align:center; background-color:%s; height:25px; border:1px solid black; border-collapse:collapse; font-family:courier;\"><span title=%s>%s</span></td>\n" "$crcErrorsColor" "$crcErrorsOrig" "$crcErrors"; fi
   if [[ "$1" == "SSD" ]] && [[ "$SSD_UDMA_CRC_Errors" == "true" ]]; then printf "<td style=\"text-align:center; background-color:%s; height:25px; border:1px solid black; border-collapse:collapse; font-family:courier;\"><span title=%s>%s</span></td>\n" "$crcErrorsColor" "$crcErrorsOrig" "$crcErrors"; fi
fi

Here is what I want it to do (mouse pointer disappeared when I took the screen shot) this is what the web browser does, not an email:

If you wanted to test run the script, go to line 685 and change Sample_Test="false" to ="true"
Next go to line 1663 where you will find a bunch of variables commented out. Go to line 1674 and remove the "#" and you will now have 2 crc errors on every drive.
Lastly, this script as-is also creates a file called "output.html" so you can see the file generated. This file also is part of the email sent out. Yesterday I lost the internet for 12 hours, sucked, so I found a way around it but since I couldn't do it in Email, it didn't help that much. I got the web browser to work but the email fell flat.

If you have never run this script, it will tell you to create an external configuration file. Just follow the directions and all should be good. And if you find somthing wrong with the directions, please let me know. It's tuff to make it Sailor Proof.

My fall-back is to add the value in parentheses, and I'm apt to add that as an option, especially if an email client refuses to accept the mouseover.

Any help is appreciated.

 

[Davvo]

I am not confident it's feasible with just plain HTML, you probably need CSS.
This might help.

How to Use CSS Hover Effects and Rollovers in Email - Email on Acid

See the first episode of Notes from the Dev: Video Edition and find out how to make an interactive email with a rollover using CSS hover effects.

www.emailonacid.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[ChrisRJ]

Nice feature!

 

[joeschmuck]

@Davvo Thanks for the references. I'm very ignorant on how email is formatted and what CSS is, I'm no programmer but I will definitely try to move forward on it.

Just to explain the script a little more because after I read it back, I wasn't sure it was obvious to anyone.
In the example I listed above, <span title=%s>%s</span> works in HTML web browser. The first %s = the actual value (15), the second %s = the normalized displayed value (0).

Nice feature!

It will be if I can make it work, and work in many email clients. I can test in Outlook, Outlook.com, Gmail, and Thunderbird. If I get it working, I'd like it ti be tested in other clients as well. It's only a good feature if it works for everyone, or at least make every attempt to make it work for everyone. I have already added an alternate to mouseover, it will display the normalized number and then the actual number in parens 0 (15) for example. I don't really like it but it's an alternate way to provide the data within the chart. Mouseover would be much nicer.

 

[joeschmuck]

Those references helped a lot, well I think. I now have some ideas and when I get home, I can test those ideas out.

 

[joeschmuck]

Those references helped a lot, well I think. I now have some ideas and when I get home, I can test those ideas out.

Nope, I'm forever lost. This stuff, why can't it just be easy? I'm sure it is for a great number of people, but this is new to me so defiantly a learning curve. I'm afraid I will have to restructure the entire email to make this work, and while I'm not afraid of a little work, I just need some email code that works so I can move forward. So I'm looking, well after I take the dogs outside. I haven't thrown in the towel just yet, give me a few days, I hope to find something. I think I will create a script to generate an email and just get something simple going and then take it from there.

 

[joeschmuck]

I have failed. As I understand it, one email clients will work, some will not in the name of security. I understand that but it also sucks. So there is the option to use Mouseover="alt" to provide the following example display where the normalized number is outside the parens and the actual number is inside the parens. And to reiterate the purpose of normalizing these values is so the end user will notice when a value has incremented again. To normalize that value again the config file must be updated, it will not happen automatically. I will continue to look for a method but maybe someone else would know what to do in the future. In the meantime I'm cheating using <a href="number"> but I'm not happy with this outcome, not what I wanted but it will mouseover and show the number, and "Click or tap to follow link" message. Of course it's not a real link

Mouseover="alt"

Mouseover="true" (href cheaters way)

 

[somethingweird]

late in the game, but here's what I got.

have you checked out - https://www.caniemail.com/ ?

the other attempt see if title attribute will work (https://www.w3schools.com/TAGS/att_title.asp) but of course it depends on email client.

 

[joeschmuck]

late in the game, but here's what I got.

have you checked out - https://www.caniemail.com/ ?

the other attempt see if title attribute will work (https://www.w3schools.com/TAGS/att_title.asp) but of course it depends on email client.

I have tried so many different things and yes, the email client makes a difference. I can get it to work in a HTML file but not within the email file. I am perfectly happy to let someone give it a try, I will even tell you the lines of code in the current version if you want to give it a shot. But right now I'm trying to learn Python and some things are easy, some things that I thought would be easy are kicking my butt.