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 for styling tooltips before committing the results to code.
If you are using Firefox, you can download and install the Toggle JS add-on for Firefox, which is available from https://addons.mozilla.org/en-US/firefox/addon/toggle-js/. This...
