qrTip: A jQuery Plugin to Display QR Codes for Links

Hey. I was doing some experimenting earlier this week with the new Google URL Shortener API and then found out that they can display QR codes for their shortened links using Google’s Chart API which is awesome. So today, I present to you qrTip — a jQuery plugin that can display QR tooltips for links on your page:

qrTip jQuery Plugin

Check out the qrTip Demo and hover over the links to feel the taste of what it’s like.

Why would you ever need this? Well mainly be cause it’s cool, and with this plugin you can provide a link to a mobile version of your website, so that people could hover, scan the QR code using their mobile and fire up the link on their device! Yeah, a little bit inspired by the Chrome to Phone extension which is quite awesome but not yet compatible with all browsers and devices out there.

Here’s a quote from the behind the scenes of this plugin section if you’re into development:

Well, I basically took the ColorTip jQuery plugin and wrote a little bit of extra code inside that injects images inside the tooltips. The actual images are coming from the Google Charts API! I also use the js-uri to get the relative links right.

You can download the sources in an archive or use git to grab it directly from my github account:

$ git clone http://github.com/kovshenin/qrtip.git

That’s all there is to it! Hope you like the plugin and find it useful in some way. You might want to tweet it too! I would also appreciate if you commented on bugs under Windows and Mac browsers. I didn’t test it on anything but Chromium on Ubuntu ;) Cheers!

About the author

Konstantin Kovshenin

WordPress Core Contributor, ex-Automattician, public speaker and consultant, enjoying life in Moscow. I blog about tech, WordPress and DevOps.

12 comments