Using Tooltips With Form Validation

The jQuery UI tooltip widget is a good way to describe what's required in a specific form input element. A good way to instruct the user, so that they're less likely to receive validation errors when they submit the form. Even with this help, the user will likely get something wrong, or just forget to supply information altogether. In this case, you can use the same tooltip widget to provide a subtle visual cue that there's something wrong with their input.

Theming Tooltip Box Shadows

The jQuery UI tooltip widget is themable, just like every other widget. Except, to a certain extent, it isn't. The tooltip uses the box-shadow CSS property to apply a decent-looking shadow around the element when it's displayed. It looks good with the smoothness theme, but with others, it's a little awkward.

Using jQuery UI Tooltips With Autocomplete

The jQuery UI autocomplete widget can transform the way each individual item is rendered. By default, it only renders the data label. But that's easy to change by extending the autocomplete widget, and overriding the _renderItem() method. For example, if each object in the autocomplete source has some specific field you would like rendered in the autocomplete drop-down, that's not difficult to implement. The challenge lies with finding enough space on the page to render this additional information. The auto complete already utilizes the menu widget to render the drop-down component — so why not utilize the tooltip widget as well?

jQuery UI: Sliders and Tooltip Values

The slider widget let's the user control a value, between a minimum and maximum by sliding a handle back and forth. This is great for forms. The developer implementing this widget, however, needs to perform some additional work in ensuring the user has appropriate feedback when the handle changes position. How else would they know what they're selecting. Even before the user starts interacting with the slider, the current value needs to be presented. In an effort to save on both development effort and on page space, the value of the slider could be displayed as a tooltip when the user moves the pointer over the handle. Further, we could have the tooltip move along with the handle as it slides, and update the value.

jQuery UI: Tooltips For Selected Text

The jQuery UI tooltip widget can be used to display contextual information about some text that a user has selected. Typically, the tooltip is used to display little tidbits about widgets or data fields in the UI — what does this do, or what does this mean? By default, the tooltip is displayed when the user hovers the mouse pointer over the element in question. But we don't want that behavior in a paragraph of text. Instead, we want the user to highlight the word or phrase they're unsure about. It is then that we lookup in our knowledge base something useful to tell the user, displayed through the tooltip widget.

Using jQuery UI Tooltips With Flot

Flot charts work nicely in jQuery projects. Especially since it's targeted for jQuery-based code. These charts can work well in jQuery UI projects too because they're very granular in their configuration values. You can make the charts look like they're seamlessly integrated into your theme. There was, however, one place I was having trouble with until recently — tooltips. I like being able to show the user some more detail when they hover over data points. Flot even provides an example of how to do this using a generic tooltip component, constructed on the fly. I want to show jQuery UI tooltips using the same approach. This is what I came up with.