WordPress

Easy Javascript ToolTips in WordPress

A client needed a simple way to preserve real estate on the sidebar, but still have the ability to display their policies at a quick glance.  I found a plugin on the repository that uses the TipTip jquery script and condenses it down into a simple-to-use shortcode (complete with button on the editing screen).

The plugin is called “WordPress Tooltip“, and can be downloaded from the repository.

Usage

Usage is dirt simple: Simply use the button located in the editor screen, and fill out the options it gives you.  You can also add tooltips by using the following shortcode (which the button generates):

[code]

[tooltip content=”This will show in a tooltip” url=”This will make tooltip a link”]Hover over me for tooltip[/tooltip]

[/code]

Styling

You can style the code using the #tiptip_content ID… an example would be:

[code]

#tiptip_content{
font-size: 14px !important;
width: 400px;
padding: 15px !important;
line-height: 22px;
}

[/code]

Bonus: Using a Shortcode in a Widget

“But Mitch,” you may say, “You said you got that to work in their sidebar widgets… when I try to paste the code in, nothing happens.” Take heart, friend, and simply add this code into your functions.php file:

[code]

add_filter(‘widget_text’, ‘do_shortcode’);

[/code]

Now, any shortcode can be added to a text widget and will resolve itself to the correct code.