• Choose a category
• All
• Classic-Fiction

Warning: Accessibility

Be careful when creating semi-transparent controls that there’s sufficient color contrast between your content and the background. Maybe it’s easy for you to read, but always consider that some of your visitors may have less than perfect vision. When in doubt, err on the side of caution, with higher contrasts than you think are necessary.

Now let’s add the event listener to our trigger link:

chapter_05/16_sliding_overlay/script.js (excerpt)

$('.cart a').mouseover(function() {

$(this).addClass('cart-hover');

$('#overlay:not(:animated)')

.addClass('active')

.html('

You have 5 items in your cart.

↵View Cart Checkout')

.slideDown();

});

There’s a new filter in our selector here: :animated, which allows us to select elements that are currently being animated (or, as in this case, combined with the :not filter to select elements which are not mid-animation.) We add some static markup to our overlay, but in a real application, you’d want to obtain the number of cart items in order to display it here.

We are also adding a class to the trigger link to style it, as its hover style would otherwise switch off when the overlay came between it and the cursor.

Of course, this is only one example of this sort of functionality; you can likely think of many others. Transparency is remarkably easy to manipulate in jQuery, and really makes interface components feel a lot slicker.

Tooltips

A tooltip is an interface component that appears when a user hovers over a control. They’re already present in most browsers; when you provide a title attribute for a link or an alt attribute for an image, the browser will usually display it as a tooltip when the user hovers over that element.

JavaScript tooltips have a bit of a bad rap. They tend to be implemented in an obnoxious manner, acting more like an ad popup than a useful information tool. However, there are situations in which a tooltip can provide just the right touch to your application, helping to inform your users in a contextual fashion without cluttering the rest of your interface.

First, we’ll have a go at replacing the browser’s default tooltips with ones we can style and animate. Then we’ll look at extending this to create a much more versatile tooltip, which can contain HTML and be attached to any element on the page.

Simple Tooltips

Tooltips typically appear when the user hovers over a hyperlink—to provide additional information about where the link will take them. Of course, there’ll be other places you’ll want to use tooltips, but this is a good place to start. We’ll look at replacing the browser’s default tooltips with our own custom-styled, animated ones, as illustrated in Figure 5.10.

Figure 5.10. Our custom tooltips

For our simple control, we’ll use the title attribute of the links. This is great for our ever-vigilant efforts to maintain acceptable functionality for users without JavaScript support; depending on their browser, they’ll most likely see the text as a basic browser tooltip:

chapter_05/17_simple_tooltips/index.html (excerpt)

New York

Using the title attribute can be a bit limiting: you’re unable (technically or reliably) to have HTML nested inside your tooltip, and you’ll need to be careful with special characters that might break the tag. There are a few alternate techniques for storing the tooltip’s text. We’ll have a look at another method when we make our advanced tooltip—but it’s important to note that any method will have upsides and downsides, and you’ll need to decide which is best in each particular circumstance.

Being able to style the tooltip is the main reason for implementing a custom control in the first place—so go nuts with your styles! However, for our example, we’ll define some very basic styles for our tooltips:

chapter_05/17_simple_tooltips/tooltips.css (excerpt)

.tooltip {

display: none;

position: absolute;

border: 1px solid #333;

background-color: #ffed8a;

padding: 2px 6px;

}

The tooltip