O'Reilly logo

jQuery UI 1.10: The User Interface Library for jQuery by Dan Wellman, Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Overriding the default styles

When styling the Tooltip widget, we are not limited to merely using the prebuilt themes on offer (about which we will cover in the next section), we can always elect to override existing styles with our own. In our next example, we'll see how easy this is to accomplish, by making some minor changes to the example from tooltip1.html.

In a new document, add the following styles, and save it as tooltipOverride.css, within the css folder:

p { font-family: Verdana, sans-serif; }
.ui-tooltip { background: #637887; color: #fff; }

Don't forget to link to the new style sheet from the <head> element of your document:

<link rel="stylesheet" href="css/tooltipOverride.css">

Tip

Before we continue, it is worth explaining a great trick ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required