Tutorials

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

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.

DON’T MISS  How to get census data in 5 minutes using R and tidycensus

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.

Aleszu Bajak
Latest posts by Aleszu Bajak (see all)
DON’T MISS  How to use IFTTT

2 thoughts on “How to make contextual images appear when you hover over highlighted text

  1. thanks for the info! quick question about it: is there a way to do it without the white border around it though? i tried to figure it out, couldn’t at all ! it really bothers me. thank you! <3

  2. Thanks for the trick!
    I have a question…
    How can I make the images not look translucent?
    I would like the images to look more “opaque” and in the foreground…
    It’s possible?

Leave a Reply

Your email address will not be published. Required fields are marked *

Get the latest from Storybench

Keep up with tutorials, behind-the-scenes interviews and more.