Annie makes it easy to add highlighting and footnotes to your WordPress posts and pages. You can highlight using the default styles or you can easily add your own. Annie also adds a toolbox which allows your site visitors to turn off highlighting or view just your highlighted text2. You should be able to see the toolbox at the bottom left of your browser window. The toolbox can be hidden by the user or turned off completely by the site administrator.

If you have Tippy installed, you can have your footnotes display in a tooltip as well as at the bottom of your post.

Enjoy! Leave feedback3! And learn more at the Annie page!

For this example, I’m going to have a smaller image and a larger image. The theme file will automatically display the smaller image under the post title and if you hover over it, it will pop up with the larger image. I could do like last time and add a custom field such as post_tooltip_small_image and post_tooltip_large_image with the url or path to those images, but for this example I’ll keep it simple and code it in directly.

See the top of this post, just above the title, for the code in action. Here’s how to get it going:

Lines 1 & 3: Like in the last example, I’m only doing this on a specific post, so check post id. Also, make sure Tippy is loaded.

Lines 5 & 6: Specify where your small and large images are stored.

Line 8: Specify your tooltip title, if desired.

Line 9: Specify what you want to display inside your tooltip. In this case, we’re wanting to display an image.

Line 11: In the last example, I said to run your content through tippy_format_text() instead of htmlentities(). In this case, however, we need to use htmlentities() (and in some cases may need both htmlentities() and tippy_format_text()!) since we’re bypassing tippy_formatLink. So before you pass your content string to the JavaScript function, make sure to run it through htmlentities() the way I do it above.

Line 13: Output the tooltip with your formatting options. If you don’t want this to be a link, just remove the anchor tag and put the id, onmouseover, and onmouseout calls on your img tag. For example:

Note that not all browsers (*cough*IE 6*cough) recognize onmouseover and onmouseout on image tags.

It is important to know how Tippy.loadTipInfo is declared. In Javascript, this function maps to domTip_loadTipInfo() and it is declared:

Whatever id you use for id=”" in the link or image tag, be sure to pass it to domTip_tipId
Set domTip_tipWidth and domTip_tipHeight to 0 if you want them to use default values.
You should always pass even for domTip_event
domTip_tipTitle can be empty, unless you want to show a header title on the tooltip.

That should about do it!

Short of that, it is fairly simple to add Tippy calls directly to your WordPress theme file. Here’s how.

For this post, I’ll be putting together a specific example, but you can adapt this for whatever you are doing.

Let’s say I want to add some custom metadata to a WordPress post and I would like a way to automatically display that metadata in a tooltip underneath the post title. For this example, I have modified my WordPress theme’s single.php file and have done just that, so you should see a Tippy link under the post title at the top of this page. In my post I added two custom fields: post_popup_title and post_popup_content – the purpose of these should be self explanatory.

Here is the coded I added to single.php to get it to display the above Tippy link:

Note that I’m only running this code on a specific post, hence my check with get_the_ID()

Line 3: Make sure the plugin is loaded and accessible.

Lines 5 & 6: retrieve title & content from the metadata

Line 8: run the content through the tippy_format_text() function; this performs some automatic conversions to make sure html, etc, work properly without making JavaScript mad. Note that you should use tippy_format_text() instead of htmlentities(). When you create the Tippy link via tippy_formatLink(), htmlentities() is automatically applied.

Line 10: Get and output the Tippy tooltip link using tippy_formatLink(). It is declared as:

The variables should all be self-explanatory, but feel free to post a comment if any of these are unclear.

That’s it! Of course you can set $tip_title and $tip_content to whatever you want; just be sure to pass $tip_content through tippy_format_text() or you might get a JavaScript error when hovering over the link.

Mensy makes it easy to create drop-down menus using a standard ul/li list of links. Mensy allows multiple levels and includes some tracking code to make navigating the menu more elegant.

Using a plugin like Mensy is superior to a pure CSS drop-down menu since Mensy allows features such as more advanced styling, level notifications, and brief delays fading out a menu if the user mouses out accidentally.

Mensy is written in CSS and JavaScript and relies on jQuery for much of its magic.

Learn more and see a demo at the Mensy page.

The PHP Doc site has a Type Comparison Table demonstrating the result you get from these comparison functions based on several different values. This table serves as a great reference to find out which function is designed to provide the kind of comparison you need.

For this post, I want to focus on three specific ways of checking values. Considering the following:

What happens when you run isset(), empty(), or if() on each of these variables? Here are some pointers:

isset()

• isset() returns true if a variable is set, no matter what its contents. The contents may be: false, 0, ”, or anything else, and isset() will still return true. So long as the variable has had some value set, it will be true. There is one exception.
• isset() returns false if a variable has never been set or if a variable has been assigned the specific keyword NULL (i.e., $var = NULL;).
• For the above variables, isset($nullvar) will be false; isset($setvar) will be true; isset($setbutfalse) will be true.

empty()

• empty() returns true for any variable that is not set, contains no value, or contains a value that equals zero (such as 0, “0″, false, etc).
• For the above variables, empty($nullvar) will be true; empty($setvar) will be false; empty($setbutfalse) will be true.

if()

• if($var) does essentially the opposite of empty($var). When checking a variable with if($var), it will return true if the variable is set and contains some value other than zero/false.
• For the above variables, if ($nullvar) will be false; if ($setvar) will be true; if ($setbutfalse) will be false.

When to use which?
It depends on what you are trying to do.

• If you want to see if a variable is set, period, and don’t care what its value is, use isset().
• If you want to see if a variable is empty or contains a value that equals 0 or false, use empty().
• If you want to see if a variable is not empty and does not contain a false/zero value, use !empty(). For example, if (!empty($passed)).
• For the above example, you could also use if ($passed) and it would do the same thing.

Perhaps this post helps clear a little of the fog. Perhaps it just makes the fog thicker. Either way, it shows that PHP has a lot of little tools to meet a lot of use cases. In PHP, there are many ways to skin a cat. The trick is knowing which way is best.

I have put together an example: Tippy on a Static Page. Go there and view the page source to see how to set it up, or scroll around the code example below.

Here is how it looks:

The most important parts are in onmouseover and onmouseout. The function Tippy.loadTipInfo() creates and displays the Tippy object, while Tippy.fadeTippyOut makes it go away.

Notice that in my example above, the div has a special attribute, tippyTitle. There are a few options for setting the tooltip title. With Tippy 3.6.4, options are limited: set the tippyTitle attribute, or let Tippy do its default behavior of grabbing the content of its tag, in this case, everything in the div. That would be a long title, so it’s far from ideal.

Tippy 3.7.0 adds two new options: manually specify, the title attribute, or pass the title to the Tippy.loadTipInfo() function. With Tippy 3.7.0, here are the parameters for loadTipInfo:

Tippy.loadTipInfo(text, width, height, id, event, title)

• Text is whatever you want to display inside the body of the tooltip.
• Width and height specify the size of the tooltip. Set 0 to use default values.
• id passes along the id of the element containing the tooltip. In this case, we want the tooltip to attach to the div with id mydiv so we pass mydiv for the id parameter.
• An event object must be passed in.
• Finally, the new parameter is the title. When you write the Tippy code, instead of specifying the title or tippyTitle attribute on your div element, specify the title in the function call.

Here is another example:

Note that when you manually write this out, you need to be careful of what you put in your tooltip text. Something like the following will not work:

Single quotes and double quotes inside the text or title parameters will throw off the JavaScript. When you use the Tippy shortcode, the plugin will automatically run the text through the following PHP function:

If you want to manually add Tippy links to your layout, you may want to use this function to keep quotes from going where they don’t belong.

Hope that helps!

The idea for Glossy came from some comments on the Tippy plugin. A few users asked about a way to create a tooltip that can be reused in multiple posts. By itself, Tippy cannot do this, so Glossy was born.

With Glossy, you can create Glossy entries in your dashboard and refer to those entries using shortcode. For instance, I created a Glossy entry with some information on the New York Stock Exchange. Just using Tippy, if I wanted to include that tooltip on multiple pages, I’d have to re-enter everything for the tooltip in every post. With Glossy, it is only necessary to use a piece of shortcode:

Example: The New York Stock Exchange

Learn more at the Glossy page!