How to make images appear when you hover over text in wordpress

TRY IT! Hover over the words in bold.

Sometimes you may want to spice things up a bit when using wordpress.
For those of us who are code challenged ( I win I win ! ) here is something I have discovered that I hope some of you may find useful.

I will use an example here from an article I am writing about Diane Arkenstone’s Musical Series of Albums “Adventure Cargo”. I want to show you a photo of the cover of the album named Following The Equator without inserting a picture or a gallery. I simply want the reader to be able to see the image as they read my article.
In WORDPRESS I will use a bit of j-query to make this as easy as 1, 2, 3.

This post is just for wordpress users.
I use a plugin to make all this so easy children can do it.
The easiest plugin that I have found is jQuery UI Widgets which you can download by clicking on on its name in this post.

After you have installed the plugin on your wordpress, we’ll need to add some code into the Options of the jQuery UI WordPress plugin to make all this work seamlessly. I found the code for this pasted on github
and it works perfectly. You can copy the code below:

jQuery(document).ready(function($) {
  $( document ).tooltip({
    items: "[data-tooltip]",
    content: function() {
      var element = $( this );  
      var text = element.text();
      var url = element.attr('data-tooltip');
      return "<img class='map' alt='" + text +
        "' src='" + url + "'>";
    }
  });
});

Below is where you will need to paste it and save the settings.
Click the image below for a a full view.

Now let’s get the image to appear where you want it.
We need a post or a page to be open in the TEXT EDITOR, be sure you are not in the Visual Editor.

Okay, so now you are in the TEXT EDITOR.
We need to highlight the text using span style and span data-tooltip. You can choose any color to use as highlighted text. I did not want my text highlighted so I chose #ffffff.

The span style is making the text’s background the color you choose. We get the jQuery to display which image for this highlighted excerpt by using the image URL after the data-tooltip.
below is the code I used for the first sentence in this post which was:
Sometimes you may want to spice things up a bit when using wordpress.

Sometimes you may want to <span style="background-color: #ffffff;" data-tooltip="http://s1.postimg.org/kpmbwqe73/Spices.jpg"><strong>spice things up a bit</strong></span> when using wordpress.

If you wanted the words “spice things up” to be highlighted in let’s say light purple.
you would change the background-color: to #E5D9FF.
It would then look like this:

Sometimes you may want to spice things up a bit when using wordpress.

OR you can make it be any color you want it to be! Remember, just change the hex-color code.
Remember to use the # sign before the code. Now I want it to be light green:

Sometimes you may want to spice things up a bit when using wordpress.

Or maybe you just want to surprise someone ! (he he he )
Just remove the hex-color code #A1EFB4 remembering to keep the span intact:

<span style="background-color: ;" data-tooltip="http://s1.postimg.org/kpmbwqe73/Spices.jpg"><spice things up a bit</span> when using wordpress.

Sometimes you may want to spice things up a bit when using wordpress.

A quick list of hex color codes can be found here