jgleman

If you are like me, you enjoy the Web comic xkcd and you also like to read it on your iPhone because xkcd is blocked at work or because you are too lazy to get off the couch to get your laptop.

If this sounds like you, you may already know the dilema that reading xkcd on the iPhone creates. How do you read the annotation contained in the title attribute of each comic since you cannot hover your cursor over the image like you would in a traditional browser?

So I wrote a bookmarklet to solve this problem for myself and I am sharing it with you, the Internet.

Installing the Bookmarklet

Step 1: Navigate to this page on your iPhone.

Step 2: Press the + button at bottom of Mobile Safari.

Step 3: Press “Add Bookmark”.

Step 4: Change the title of the new bookmark to something like “Show the xkcd title that you normally have to hover to see” and press “Save”.

OK, probably call it something shorter than that. I actually gave it a generic name because you can use it on any site.

Step 5: Copy this text to your iPhone’s clipboard:

javascript:(function(){imgs%20%3D%20document.getElementsByTagName%28%22img%22%29%3Bfor%20%28var%20i%3D0%3Bi%3Cimgs.length%3Bi++%29%20%7B%20%20%20%20imgs%5Bi%5D.onclick%20%3D%20function%28%29%7B%20%20%20%20%20%20%20%20%20alert%28this.alt%20+%20%22%5Cn%5Cn%22%20+%20this.title%29%3Breturn%20false%3B%20%20%20%20%20%7D%3B%7D})();

Step 6: Pull up the bookmarks menu in Mobile Safari. Press “Edit” and select your newly created bookmark.

Step 7: Clear the value of the address field and paste the contents of the clipboard into the field and press “Done”.

Step 8: Go to http://xkcd.com on your iPhone (now is a good time to read the comic), pull up your bookmarks menu and select your newly created bookmark and then tap the comic to view the tooltip.

More Information Than You Require

For those who are curious, here is the un-encoded version of the JavaScript:

    imgs = document.getElementsByTagName("img");
    for (var i=0;i<imgs.length;i++) {
        imgs[i].onclick = function() {
            alert(this.alt + "\n\n" + this.title);
            return false;
        };
    }

Technically it shows both the alt attribute and the title attribute and it will work on any img on any page. If the image is a link, it will not click through, so if you want to click through you’ll have to reload the page.

Note: If anyone reading this has an Android handset, how does the browser on Android handle tooltips? If it acts similarly to Mobile Safari please give this a try, I would be curious to know if it works.