Skip to content
Taking a simple email link to a new level.
HTML CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
.gitattributes
README.md
index.html

README.md

Expanded Email Hyperlink 1.0

For something so simple as a email hyperlink, the current experience often doesn’t fit with what users have been doing in the desktop space. I myself use Gmail, so while sending an email from mobile is as simple as a click, I’m often copying email addresses and bringing them to Gmail.com on my laptop.

Adham Dannaway’s use of a tooltip and some JavaScript inspired me to create a better experience, as his doesn't account for mobile users. jQuery is needed though for this.

The system uses mobile detection to determine if the user is on a mobile device, or a laptop (or desktop). A desktop/laptop user would see a tooltip when hovering over the hyperlink. If he clicks, then an email address is copied into the user’s clipboard, and he can paste it into his email client (or site) of choice. If the user is on a mobile device, the tooltip functionality is turned off and the JavaScript will make the link act like any normal mailto hyperlink

You can see a working example here.

Getting Set Up

The download contains an html file for the setup, a JavaScript file for the functionality, and both SCSS and CSS files for the styling. Bear in mind the tooltip is powered by CSS.

Beyond changing the text to anything you like to say, the only other real configuration is setting up your email address in two areas. First there’s a span in the HTML page:

<span id="myAddress" class="vanish">name@email.com</span>

This is necessary as an item for the JavaScript to copy into the clipboard when one clicks on the link. Then there is also the email address in the JavaScript:

var email = 'name@email.com';

Now you can change the message of the tooltip. You first need to fix it in the HTML:

tooltip-content="Click to copy my email address to your clipboard."

That is for the initial showing of the tooltip. The functionality to switch messages when a user clicks is in the JavaScript:

$("#emailLink").attr('tooltip-content','My email address is in your clipboard.');
$("#emailLink").mouseleave(function(){
    $("#emailLink").attr('tooltip-content','Click to copy my email address to your clipboard.');
});

Questions? Comments? Suggestions?

Please feel free to reach out or fork this and improve on it.

Authors

Acknowledgments

  • Adham Dannaway...he had the initial inspiration.
You can’t perform that action at this time.