This is going to be our last example for this chapter. But don't worry, I know we have already worked a lot, so this last example is going to be quite easy and short.

Tooltips are always a good way of adding hints and info. Interested visitors can see this info, but visitors who are not interested don't need to see this info.

A tooltip plugin that looks pretty good is the Coda Bubble plugin. As with the other plugins, we can search for it on the jQuery site, or at the following link:

http://plugins.jquery.com/project/codabubble.

If we want to download it, we can do so from the developers' site:

http://www.myjquery.co.uk/.

After downloading the coda bubble ZIP file, we have all the files needed. So let's get started. A place where a tooltip can be of help is the footer. At this point in time, our site footer looks as follows:

Not much info, well, in fact no info. We can take more advantage of our footer, giving some more information to our visitors or placing any message we want. For example, look in our templates/jj15/index.php file; at the very bottom of it, we can read:

</div><!-- End footer wrapper -->
                

Just before this, we are going to add some text:

<br/><br/>
                    <p class="info">Demo site created for the Joomla! javascript jQuery Packt book +info</p>
                    </div><!-- End footer wrapper -->
                

We need some styles before we can take a look into this. In the templates/jj15/styles.css file, at the end we will add:

/**
                    * Coda Bubble
                    */
                    .info{
                    color: #ffffff;
                    text-align: center;
                    }
                

There's not much styling, but it will make our text look a bit better, as we can see in our next screenshot:

Now we are going to follow the steps necessary to create a tooltip on the +info word. Stay with me, it's going to be interesting! First, as always, we need to include the plugin JavaScript file so that we can use it later.

After downloading and uncompressing the plugin bundle, we will find a file called jquery.codabubble.js, or something similar. Where do you think we are going to place this file? Exactly! In templates/jj15/js/jquery.codabubble.js. Also, don't forget to create the script tag in the header of our template.

But we will also need a CSS file with all the styles necessary for the tooltip to work. The file we are talking about is bubble.css—we can't get lost on this. Take it and place it in templates/jj15/css.

This CSS file also needs some images to work. These images are located in a folder called images and we are going to place this folder inside templates/jj15/css too.

It would be nice to rename this folder as something more useful for us to remember what is inside it. For example, we can have something similar to templates/jj15/css/bubble_images.

Don't forget to add the include tag in our header:

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/ jj15/css/bubble.css" type="text/css" />
                

The styles now get included. After that, we will add some text, which will go into the tooltip. We can place it in any way we want, even include images. For now we are going to place something simple, as follows:

<br/><br/>
                    <p class="info">Demo site created for the Joomla! javascript jQuery Packt book +info</p>
                    <div class="bubble_html">
                    Author: Jose Argudo Blanco.<br/>
                    Title: Joomla! Javascript jQuery.<br/>
                    Theme: Joomla!, jQuery.<br/>
                    Publisher: Packt Publishing.<br/>
                    Contact: [email protected]
                    </div>
                

The important thing here is to have the bubble_html class in our DIV. Inside this DIV, the jquery.codabubble.js will search for the content to show inside the tooltip. Are there other changes that need to be done? It seems so. Well, at the end, our code must look as follows:

<br/><br/>
                    <div class="coda_bubble">
                    <p class="info">Demo site created for the Joomla! javascript jQuery Packt book <span class="trigger">+info</span></p>
                    <div class="bubble_html">
                    Author: Jose Argudo Blanco.<br/>
                    Title: Joomla! Javascript jQuery.<br/>
                    Theme: Joomla!, jQuery.<br/>
                    Publisher: Packt Publishing.<br/>
                    Contact: [email protected]
                    </div>
                    </div>
                

Let's take a look at these elements. We can see that all the code is enveloped in a DIV with the coda_bubble class. Inside this DIV, we can find the two tooltip elements:

We can have as many coda_bubble DIVs as we want—each one with his own pair of trigger and bubble_html. Now that the structure is ready, what we need to do is execute the call, with something like the following:

Contact: [email protected]
                    </div>
                    </div>
                    <script type="text/javascript">
                    jQuery(document).ready(function($) {
                    opts = {
                    distances : [20],
                    leftShifts : [280],
                    bubbleTimes : [500],
                    hideDelays : [0],
                    bubbleWidths : [300],
                    bubbleImagesPath : "<?php echo $this->baseurl ?>/templates/jj15/css/bubble_images/skins/classic",
                    msieFix : true,
                    msiePop : true
                    };
                    $('.coda_bubble').codaBubble(opts);
                    });
                    </script>
                

Let's take a look at these parameters:

And those were the parameters. Pretty easy, aren't they? You can get all the details and examples of these parameters at the following link:

http://www.myjquery.co.uk/docs/x/plugins/coda_bubble/coda_bubble.php.

Before finishing, and to make the styles look better, I've made a small change to the templates/jj15/css/bubbles.css file. We need to change the following style:

.coda_bubble {
                    position: relative;
                    top: 0px;
                    left: 0px;
                    width:100px;
                    text-align:left;
                    float:left;
                    padding-left:20px;
                    }
                

It needs to be modified as follows:

.coda_bubble {
                    position: relative;
                    width: 414px;
                    margin: 0 auto;
                    }
                

But this is just a style change that doesn't really affect the way the plugin works. It's time to take a look at the result of our work!

Quite nice, isn't it? Job done!