metinsaylan // rogue developer

Adding jquery tooltips to your wordpress theme

To use a jquery plugin within your wordpress site you need to load jquery manually along with the jquery script files. In this step by step tutorial I will explain you how to add a simple jquery tooltip plugin to your site. ***

First thing to do is; uploading plugin script in your theme folder. You may put it in a directory named js or something like that to keep things tidy. After putting files in place you need the magic word to load a javascript file in your theme: wp_enqueue_script. This function adds your file in queue and wordpress use it when the time comes. Here is how to add our file in to queue:

[php title=”functions.php”]function enqueue_scripts(){ wp_enqueue_script(‘jquery’); // load jquery with theme wp_enqueue_script(‘tooltip’, get_stylesheet_directory_uri() . ‘/js/ez-tooltip.js’); } add_action(‘init’, ‘enqueue_scripts’); ```

This code will run when init is called and it will add both jquery and our tooltip script to site’s <head> part.

Jquery Tooltip plugin will display title values from images and links with a CSS class tooltip. Here is a link sample:

[html]<a href="http://metinsaylan.com" title="This will be displayed as tooltip" class="tooltip">Hover link to see tooltip</a>[/html]

Also you can use image titles for tooltips (Eg. for post titles):

[html]<img src="http://metinsaylan.com/shailan_logo.png" title="Shailan.com - Where your heart is blah blah" width="90" height="90" />[/html]

Using this simple structure you can add tooltips to any image or link on your site.

By default script uses tooltip id to style the tooltip element. Here is a sample CSS for your styling:

[css]#tooltip{ display:none; position:absolute; z-index:1000; background-color:#ffd; color:#444; padding:4px; box-shadow:#333 1px 1px 3px; }[/css]

Please note that wordpress loads jquery with no-conflict mode. This means many jquery code you can find on web won’t work. To make them work you need to replace $ signs with jQuery.

You can download the tooltip script here: [download id=”8”]

Search Adding jquery tooltips to your wordpress theme on Google