Title Text Bookmarklet

A lot of webcomics include an extra punchline or commentary inside the title or alt text for the comic, which displays when you let the mouse cursor hover over the image for a couple seconds.

On a touchscreen device, you can't hover. So: bookmarklet to the rescue! I'm not the first to come up with this idea, but I didn't like the style or function of the existing ones that I could find.

I did like the style of Andy Allcorn's QwantzReveal bookmarklet, which is filling this same function, but it is very specific to the easter eggs for Ryan North's Dinosaur Comics. I wanted something that could work for more webcomics but use the same style.

So, I grabbed the code for that and chiselled away at it until I had something that works reasonably well for the webcomics I'm likely to use it with.

The result: Copy this link into a bookmark!

Running the bookmarklet will make an overlay fade in on top of the comic image, showing both the alt and/or title (whatever exists). Tapping it will cause the overlay to fade away, leaving the comic as it was. (Unless the comic is linked to something else, then it will follow the link.)

Identifying which (if any) image in the page is the comic is a rough hack but it seems to work for the comics I read (including Overcompensating, The Adventures of Dr. McNinja, XKCD and Achewood (but not via Assetbar)). It doesn't work for A Softer World, but you can already just tap on the comic there to see the title text.

Let me know if (a) there's any comics this ought to work on, but doesn't, and (b) any situations where it mangles the page layout or doesn't display nicely over the image.

EDIT: Alternately, select all from the follow text area and copy it:
javascript:var%20secrets%20=%20new%20Object();secrets.html%20=%20%22%22;var%20imgs%20=%20document.getElementsByTagName(%22img%22);for%20(var%20i%20=%200;%20i%20%3C=%20imgs.length;%20i++)%20{if%20((imgs[i].getAttribute(%22src%22)%20&&%20imgs[i].getAttribute(%22src%22).match(/\/comic/))%20||%20(imgs[i].getAttribute(%22class%22)%20&&%20imgs[i].getAttribute(%22class%22).match(/comic/i)))%20{secrets.targetElement%20=%20imgs[i];if%20(imgs[i].getAttribute(%22title%22))%20secrets.html%20+=%20%22%3Cspan%20style=\%22display:%20block;%20padding:%205px%200;\%22%3E%3Cstrong%20style=\%22color:%20#fff;\%22%3Etitle%20text:%3C/strong%3E%20%22%20+%20imgs[i].getAttribute(%22title%22).replace(/%20/g,%20%27%20%27)%20+%20%22%3C/span%3E%22;if%20(imgs[i].getAttribute(%22alt%22))%20secrets.html%20+=%20%22%3Cspan%20style=\%22display:%20block;%20padding:%205px%200;\%22%3E%3Cstrong%20style=\%22color:%20%23fff;\%22%3Ealt%20text:%3C/strong%3E%20%22%20+%20imgs[i].getAttribute(%22alt%22).replace(/%20/g,%20%27%20%27)%20+%20%22%3C/span%3E%22;break;}}if%20(document.getElementById(%22pgAddedSecrets%22))%20{var%20secretsDiv%20=%20document.getElementById(%22pgAddedSecrets%22);secretsDiv.style.opacity%20=%20%220%22;secretsDiv.style.display%20=%20%22inline-table%22;secretsDiv.style.left%20=%20secrets.targetElement.offsetLeft%20+%20%22px%22;secretsDiv.style.top%20=%20secrets.targetElement.offsetTop%20+%20%22px%22;}%20else%20if%20(secrets.targetElement)%20{var%20relDiv%20=%20document.createElement(%27div%27);relDiv.style.position%20=%20%22relative%22;secrets.targetElement.parentNode.insertBefore(relDiv,%20secrets.targetElement);relDiv.appendChild(%20secrets.targetElement%20);relDiv.appendChild(document.createElement(%27br%27));var%20secretsDiv%20=%20document.createElement(%27div%27);secretsDiv.id%20=%20%27pgAddedSecrets%27;secretsDiv.style.position%20=%20%22absolute%22;secretsDiv.style.display%20=%20%22inline-table%22;secretsDiv.style.width%20=%20secrets.targetElement.scrollWidth%20+%20%22px%22;secretsDiv.style.height%20=%20secrets.targetElement.scrollHeight%20+%20%22px%22;secretsDiv.style.left%20=%20secrets.targetElement.offsetLeft%20+%20%22px%22;secretsDiv.style.top%20=%20secrets.targetElement.offsetTop%20+%20%22px%22;secretsDiv.style.overflow%20=%20%22visible%22;secretsDiv.style.opacity%20=%20%220%22;secretsDiv.style.webkitTransition%20=%20%22opacity%201s%20ease-in-out%22;secrets.targetElement.parentNode.appendChild(secretsDiv);}if%20(secretsDiv)%20{secretsDiv.innerHTML%20=%20%22%3Ca%20id=\%22secrets_inner\%22%20style=\%22text-decoration:%20none%20!important;%20display:%20table-cell;%20background:%20rgba(10,10,10,0.8);%20color:%20%23ccc;%20text-shadow:%201px%201px%204px%20%23000;%20margin:%200%20auto;%20padding:%2020px%2030px;%20text-align:%20left;%20vertical-align:%20middle;%20font-size:%2024px;%20font-weight:%20normal;\%22%20href=\%22javascript:document.getElementById(%27pgAddedSecrets%27).style.opacity=%270%27;%20window.setTimeout(%27document.getElementById(\\%27pgAddedSecrets\\%27).style.display=\\%27none\\%27;%27,%201100);\%22%3E%22%20+%20secrets.html%20+%20%22%3C/a%3E%22;window.setTimeout(%27document.getElementById(%22pgAddedSecrets%22).style.opacity%20=%20%221%22;%27,%200);window.addEventListener(%27resize%27,function%20()%20{var%20secretsDiv%20=%20document.getElementById(%22pgAddedSecrets%22);var%20targetElement%20=%20secretsDiv.previousSibling.previousSibling;secretsDiv.style.left%20=%20targetElement.offsetLeft%20+%20%22px%22;secretsDiv.style.top%20=%20targetElement.offsetTop%20+%20%22px%22;},%20false);}
then create a bookmark, edit it, and paste what you copied in place of the URL.