Time for action – customizing PowerTip

Let's take a look at some of the options we have to customize PowerTip and how we can use them. We'll keep working with the files we set up in the preceding example:

1. Let's say that we want to change the position of the tooltip. PowerTip gives us plenty of options to position tooltips on our page, as follows:
   

   How do we tell PowerTip where we want our tooltips to appear? Let's go back to that line of code in our scripts.js file where we called the powerTip method to create the custom tooltips:

   $('.gallery img').powerTip();

   Remember in eating bacon. So, in JavaScript, we passed bacon to the eat method of the dog.

   Well, in this case, we can pass a set of options to the powerTip method to define where our tooltips are placed, among other things. To define the position of our tooltips, we'll set the placement option to the direction we want (n, ne, ne-alt, e, se, se-alt, s, sw, sw-alt, w, nw, or nw-alt). We just have to make the following simple modification to our code:

   $('.gallery img').powerTip({placement: 'sw-alt'});

   In this example, we'll place the tooltips underneath the image we're hovering over and anchor them to the bottom-left (or south-west) corner.

   You'll notice that each of the four corner options for PowerTip have an additional alt placement option. The default corner option will display the tooltip anchored to your chosen corner and the tooltip itself to the side of the item you're hovering over.

   

   The alt option for each corner also displays the tooltips anchored to your chosen corner, but shows the tooltip directly above or below the item you're hovering over rather than to the side, as shown in the following screenshot:

   

   As our images are side-by-side in this example, the alt placement option makes more sense, so that's the one we'll use.

2. Depending on the width of our browser window and the layout of our content, our chosen placement for the tooltips might sometimes result in the tooltip being displayed completely or partly out of view. Luckily, the developers of this plugin have anticipated this possibility and have provided us with an option to make sure that the tooltips are always visible. It's called Smart Placement, and we can enable this option by setting the smartPlacement option to true, as shown in the following code:

   $('.gallery img').powerTip({smartPlacement: true});

   What if you need to pass more than one option to the powerTip method? To pass more than one option, you just have to separate the options with a comma. So, we can define our tooltip position and turn on Smart Placement as follows:

   $('.gallery img').powerTip({placement: 'sw-alt', smartPlacement: true});

   Now, you can see that if I were setting a dozen or more options, this line of code would get long and hard to read. For this reason, it's a common practice to break options out on separate lines as follows:

   $('.gallery img').powerTip({
     placement:      'sw-alt',
     smartPlacement: true
   });

   The content is the same, it's just that it's easier for us humans to read and understand the code when it's broken into lines this way. A computer doesn't care one way or the other.

   Tip

   Be careful not to add an extra comma after the last option/value pair. Most browsers will handle this gracefully, but IE will throw a vague error and your JavaScript won't work at all. It can be a frustrating problem to try and track it down.

3. In addition to changing the position of the tooltip, we can use CSS to change the appearance of the tooltip itself. If you wanted to use one of the alternate color schemes that was included with PowerTip, you'd just have to swap the style sheet in your HTML document with the one you wanted to use. That's very simple and straightforward.

   However, we can also write our own CSS styles for our tooltips. To get started, we'll examine the jquery.powertip.css file that was included with the PowerTip download. The following code is an example from this file that shows how the colors and styles are specified:

   #powerTip {
     cursor: default;
     background-color: #333;
     background-color: rgba(0,0,0,.8);
     border-radius: 6px;
     color: #fff;
     display: none;
     padding: 10px;
     position: absolute;
     white-space: nowrap;
     z-index: 2147483647;
   }
   
   #powerTip:before {
     content: "";
     position: absolute;
   }
   
   #powerTip.n:before,#powerTip.s:before {
     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
     left: 50%;
     margin-left: -5px;
   }
   
   #powerTip.n:before {
     border-top: 10px solid #333;
     border-top: 10px solid rgba(0,0,0,.8);
     bottom: -10px;
   }
   
   #powerTip.s:before {
     border-bottom: 10px solid #333;
     border-bottom: 10px solid rgba(0,0,0,.8);
     top: -10px;
   }

   You'll notice that there's quite a lot of code using the :before and :after CSS pseudoclasses, and you might wonder what exactly is going on with that. This is a clever CSS technique to create triangle shapes without relying on images. This code creates the triangle-shaped connector between the tooltip and the item you're hovering your mouse over. If you'd like to learn more about this technique, there's an excellent tutorial with plenty of explanations at http://konigi.com/tools/css-tooltips-and-speech-bubbles.

4. By examining the CSS code, you can see that all we need to do to create our own color scheme is replace all the color definitions in this file with a color of our own choosing. I'm going to choose a melon orange shade, which is #fc6e51 as a hex color and 252, 110, 81 as an RGB color. The RGB color is important because we can use it to create an RGBA color that is transparent.

   To switch to a new color scheme, all we need to do is go through the jquery.powertip.css file and switch the color values to the newly selected values. An example from the new CSS is shown in the following code:

   #powerTip {
     cursor: default;
     background-color: #fc6e51;
     background-color: rgba(252, 110, 81, 0.8);
     border-radius: 6px;
     color: #fff;
     display: none;
     padding: 10px;
     position: absolute;
     white-space: nowrap;
     z-index: 2147483647;
   }
   
   #powerTip:before {
     content: "";
     position: absolute;
   }
   
   #powerTip.n:before, #powerTip.s:before {
     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
     left: 50%;
     margin-left: -5px;
   }
   
   #powerTip.n:before {
     border-top: 10px solid #fc6e51;
     border-top: 10px solid rgba(252, 110, 81, 0.8);
     bottom: -10px;
   }
   
   #powerTip.s:before {
     border-bottom: 10px solid #fc6e51;
     border-bottom: 10px solid rgba(252, 110, 81, 0.8);
     top: -10px;
   }

   Similarly, go on replacing the color values throughout the entire file. Now, when you preview the tooltip in the browser, you'll see an orange tooltip, as shown in the following screenshot:

   

   You can take the customization as far as you want. You can modify the border radius, add a gradient, add a text shadow and/or a box shadow, change the text color, add a border, and so on.

What just happened?

We learned how we can adjust the positioning of our tooltips, how we can use other options provided by the PowerTip plugin, and we created our own custom style for the tooltips. You can use any CSS styles you like to customize the appearance of the tooltips; there's virtually no limit to the possibilities of styles for your tooltips.