Displaying the mouse movement

We can use the tooltip widget as an aid during development, and not necessarily a widget that ships with the finished product. For example, we can use the tooltip widget to track the mouse movements and to display the X and Y coordinates. This could help us diagnose some tricky mouse behavior as we're piecing together the UI components. We'll look at tracking the mouse coordinates for specific elements, but bear in mind, the concept is what counts. We can use this technique to display any number of event properties—we simply discard the call when no longer needed.

How to do it...

We'll create the required CSS first. These simply position the div elements that we'll want to track mouse movements on.

.mouse-tracker {
    margin: 20px;
    background-image: none;
    padding: 3px;
}

.mouse-tracker p {
    font-size: 1.2em;
}

.mouse-tracker-page {
    width: 180px;
    height: 170px;
}

.mouse-tracker-relative {
    width: 150px;
    height: 140px;
}

Next comes the...