Time for action – showing custom content in tooltips

Perform the following steps to load custom content into your tooltips:

1. We'll keep working with the document that we've been building over the past few tooltip tutorials. The first thing we want to add is some new content. First, we'll create some blocks of helpful content at the bottom of our HTML page, as shown in the following code:

   <h2 id="pb-moreinfo">More Information</h2>
   <ul class="info-boxes">
     <li id="info-box-bridge">
       <div class="info-box-container">
         <img src="images/bridge.jpg"/>
         <div class="info-box-content">
           <p>One of many bridges in Pittsburgh</p>
         </div>
       </div>
     </li>
     <li id="info-box-downtown">
       <div class="info-box-container">
         <img src="images/downtown.jpg"/>
         <div class="info-box-content">
           <p>Downtown<br/>Pittsburgh</p>
         </div>
       </div>
     </li>
     <li id="info-box-icecream">
       <div class="info-box-container">
         <img src="images/icecream.jpg"/>
         <div class="info-box-content">
           <p>Ice cream beats the summer heat</p>
         </div>
       </div>
     </li>
   </ul>

   We're including some images and a bit of text about each one. Next, we'll style this with CSS as follows:

   Ul.info-boxes li {
     display: inline-block;
     margin-right: 1em;
   }
   
   .info-box-container {
     width: 200px;
   }
   
   .info-box-container img {
     border-top-left-radius: 7px;
     border-top-right-radius: 7px;
   }
   
   .info-box-content {
     background: white;
     border-bottom-left-radius: 7px;
     border-bottom-right-radius: 7px;
     color: #444;
     line-height: 1.5;
     padding: 1em;
     text-align: center;
   }
   
   .info-box-content p {
     margin: 0;
   }

   Now, if we look at this page in a browser, we'll see the information boxes lined up and nicely styled at the bottom of the page, as shown in the following screenshot:

   
2. Next up, we'll add a couple of paragraphs of text that link to these information boxes. Add this text above the information boxes so that they are displayed between the photo gallery and the information boxes, using the following code:

   <h2 id="pb-about">About Pittsburgh</h2>
   <p>Pittsburgh is the second-largest city in the US Commonwealth of Pennsylvania and the county seat of Allegheny County. <a href="#info-box-downtown" class="info-box">Downtown Pittsburgh</a> retains substantial economic influence, ranking at 25th in the nation for jobs within the urban core and 6th in job density.</p>
   
   <h2 id="pb-geography">Geography</h2>
   <p>Pittsburgh is known colloquially as "The City of Bridges" and "The Steel City" for its <a href="#info-box-bridge" class="info-box" >many bridges</a> and former steel manufacturing base.</p>
   <p>Conditions are often humid, and combined with the 90&deg;F (occurring on an average of 8.4 days per annum), a considerable <a href="info-box-icecream" class="info-box">heat index</a> arises.</p>

   We need an easy way to select and interact with the links to the information boxes, so we've added a CSS class of info-box to each one.

3. Now, what we'll do is load the corresponding information box in the tooltip when each of these links is hovered over. Pretty cool, right?

   First, we'll have to associate each of the links with the corresponding information box. We can do this by adding an HTML5 data attribute to each link, as shown in the following code snippet:

   <a href="#info-box-downtown" class="info-box" data-powertiptarget="info-box-downtown">Downtown Pittsburgh</a>

   The documentation on the PowerTip plugin explains that the plugin will look for a data attribute named powertiptarget. If the attribute exists, then PowerTip will pull in the content from the element with that ID and display it in the tooltip.

   Let's talk about the data attributes. They can be used to attach all different sorts of hidden information to the HTML elements, which we can then use in JavaScript to achieve all sorts of special effects. You start a data attribute with data-. After this, you name the data attribute. In this case, we knew from the PowerTip documentation that the attribute should be named powertiptarget. In other cases, you'll be able to name your data attributes whatever you wish. Picking names that make logical sense will help you and others make sense of your code more easily—in much the same way that picking logical names for JavaScript variables helps your code make sense.

   When we hover over this link, we want to display the information box that we've given the ID of info-box-downtown, so this is the value we'll assign to the powertiptarget data attribute.

4. Next up, we're ready to jump back into scripts.js. Add a new line inside your document ready statement and comment it so that you remember this is the code to add the information box tooltips, as shown in the following code:

   $(document).ready(function(){
     /* Add tooltips to navigation */
     $('nav a').powerTip({
       popupId: 'navTip'
     });
   
     /* Add text tooltips to photos */
     $('.gallery img').powerTip({
       placement: 'sw-alt'
     });
   
     /* Add new content to text links */
     $('.info-box').powerTip();
   });

   If you view the page in a browser, you'll see that the data attributes we applied to our links are already working; if you hover over one of the links, you'll see the corresponding information box displayed in a tooltip, as shown in the following screenshot:

   

   That's a good start, but we'll want to change some of the PowerTip configuration options and also the style of the tooltip.

5. We'll tackle the configuration options first. We'd like the information box tooltip to show to the right of the links unless they don't fit on the screen. We'd like to write some new CSS styles, and we'd like to allow our site visitors to move their mouse over the information boxes. The following code shows what we'll add as configuration options:

   $('.info-box').powerTip({
     placement: 'e',
     mouseOnToPopup: true,
     smartPlacement: true,
     popupId: 'infoTip'
   });

   Setting the placement option to e will make the tooltips display on the right-hand (or east) side of the links. We can make sure the tooltips are visible even for links near the right-hand side of the screen by setting smartPlacement to true. We can use an option called mouseOnToPopup and set it to true to allow site visitors to move their mouse onto the tooltip—this feature is particularly useful for those cases where we might have links or other interactive content included in our tooltip content. Finally, as we want to write some new CSS styles for the tooltip, we're going to set a new ID for the tooltips, for which we've chosen the infoTip ID.

6. Now, the only thing left to do is to write some new CSS styles for the tooltips. We're going to change the background color to white and make sure the text can wrap. Feel free to style your tooltips the way you want. The following code is a sample from the example code included with the book:

   /* Info box tooltips */
   #infoTip {
     cursor: default;
     background-color: #fff;
     border-radius: 7px;
     box-shadow: 0 0 15px rgba(0,0,0,0.5);
     color: #444;
     display: none;
     padding: 0;
     position: absolute;
     z-index: 2147483647;
   }
   #infoTip:before {
     content: "";
     position: absolute;
   }
   #infoTip.n:before, #infoTip.s:before {
     border-right: 5px solid transparent;
     border-left: 5px solid transparent;
     left: 50%;
     margin-left: -5px;
   }
   #infoTip.n:before {
     border-top: 10px solid #fff;
     bottom: -10px;
   }
   #infoTip.s:before {
     border-bottom: 10px solid #fff;
     top: -10px;
   }

   Now, if you view the page in a browser, you'll see that the tooltips have their own style and are displayed where we specified, as seen in the following screenshot:

   

   Also, if the link gets too close to the right, PowerTip will figure out how to adjust the placement of the tooltip to make sure it's visible, as seen in the following screenshot:

   

   Also, if you move your mouse over the tooltip, you'll see it stays open to allow you to interact with any content that might be inside.

7. Now, there's just one issue with our page: for users with JavaScript disabled, we set up the links to jump down the page so that the relevant associated content was visible on the screen. Now that our tooltips are working, this behavior feels a little odd; if the content is already visible, why jump down the page to it?

   We can fix that by canceling the browser's default behavior when a link is clicked. Go back to scripts.js and adjust your JavaScript as follows:

   $('.info-box')
     .on( 'click', function(e) {
       e.preventDefault();
     })
     .powerTip({
       placement: 'e',
       mouseOnToPopup: true,
       smartPlacement: true,
       popupId: 'infoTip'
     });

   There are a few things going on here. Let's start by talking about how .on and .powerTip are divided in separate lines. For the most part, JavaScript doesn't care about white space, so we're free to format our code the way we want. Computers don't have any issues parsing or reading our code even if it's sloppy and the indentations don't line up. When our code is broken up onto separate lines, as shown in the preceding code snippets, it's easier for us humans, who might want to read or edit the code, to read and understand. We don't have to go searching through one long line of code for what we're looking for because, believe it or not, all this code is technically just one line of JavaScript.

   It's easy for us to see that we're working with some HTML element that has a CSS class of info-box. We've got a function to tell the browser what to do when someone clicks on this HTML element, and we're setting up the powerTip method to display tooltips.

   Next, let's talk about chaining. You can see in the preceding code that we're only referring to the HTML element with the class of info-box once, but we're writing two bits of code for it. jQuery allows us to do this with the feature called chaining. Most jQuery functions (but not all) can be chained. For example, consider the following line of code:

   $('.foo').hide().addClass('bar').show();

   This line of code will select an HTML element with a class of foo, hide it, add a new CSS class to it, and then show it again. You can see how this chaining feature would allow us to save quite a lot of typing.

What just happened?

We learned how we can pull in content from elsewhere on the page to be displayed inside our tooltips. Being able to display the title attributes in a more attractive way is definitely a nice feature, but the PowerTip plugin is even more powerful than that. By adding HTML5 data attributes to our elements, we can specify any content to be displayed inside our tooltips: links, images, text, icons, and so on. We learned how to allow site visitors to move their mouse over the tooltips to interact with the content there. Also, we saw how we can stop the browser from jumping down the page when the links are clicked by preventing the default events from happening in response to actions.

Have a go hero – create clickable tooltips for an image gallery

Set up an image gallery of a set of images of your choice. When each image is hovered over, show a tooltip that provides a short description and links to an article on Wikipedia for more information. Style the image gallery and tooltips the way you like.