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?
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.
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.
2 thoughts on “How to make contextual images appear when you hover over highlighted text”
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
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…