How to make contextual images appear when you hover over highlighted text

How to
Share on FacebookShare on Google+Tweet about this on TwitterPin on PinterestShare on LinkedInEmail this to someone

Despite the Internet being an infinite canvas, digital storytellers are constantly running into space limitations. Digital layout design is an art and embedding multimedia alongside or within lines of text does not always work. Hyperlinks are great but they take the user away from your narrative. What if an image could appear when a piece of a story was highlighted? Say I’m writing a story set in Mexico City and I want to show you a photo of its main square without moving away from my narrative layout. See what I did there?

JQuery UI is a Javascript library that provides all manner of animations, hover effects, sliders, and drop-menus. The following is tutorial for using jQuery UI’s tooltip function to add contextual photographs to a highlighted piece of text. For those of you on WordPress, we’ll point you to a great plugin. For those coding from scratch, disregard the plugin download step. So far this doesn’t work on mobile.

Download the jQuery UI WordPress plugin

There’s a simple plugin called jQuery UI Widgets available for WordPress. Download it here. Upload the zip file and activate it in your WordPress plugins admin page.

Finding the right jQuery UI code

We are looking to build a jQuery UI tooltip into our article. A tooltip is a graphical element that encodes additional information. It displays the information after a brief interaction (such as a hover-over with a mouse).

After looking through the documentation on the jQuery UI website, we found a customizable tooltip that would allow an image to pop-up. Storybench  modified the code and created the following:

Paste this into the Options page of the jQuery UI WordPress plugin.

paste in ui

Click Save Changes at the bottom of the plugin’s Options page.

Designating which line or word to highlight and which image to show

Open the post or page in WordPress where you want to deploy this snippet of code. Enter the Text tab (not the Visual tab) of the WordPress text editor. This is how you can edit the HTML.

You want to highlight your text using span style and span data-tooltip. All span style is doing is making the text’s background yellow. You will tell the jQuery which image to display for this highlighted excerpt by listing an image URL after the data-tooltip, in this case a photo of Mexico City’s Zocalo.

This is how it works in the wild:

Say, I’m writing a story set in Mexico City and I want to show you a photo of its main square without moving away from my narrative layout.

For those not on WordPress

You’ll want to include the jQuery code and jQuery UI code in the head of your HTML.

Let us know if you’ve improved upon this jQuery UI tooltip widget. We’ll have more jQuery tutorials to come.

Storybench’s editor is Aleszu Bajak, a science journalist and former Knight Science Journalism Fellow at MIT. He is an alum of Science Friday, the founder of LatinAmericanScience.org, and is passionate about breaking down the divide between journalists, developers and designers.

Leave a Reply