Implementing a default tooltip
Tooltips were built to act as direct replacements for the browser's native tooltips. They will recognize the default markup of the title attribute in a tag, and use it to automatically add the additional markup required for the widget. The target selector can be customized though using tooltip's items and content options; you'll see an example of this later in this chapter. Let's first have a look at the basic structure required for implementing tooltips.
In a new file in your text editor, create the following page:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tooltip</title>
<link rel="stylesheet" href="development-bundle/themes/redmond/jquery.ui.all.css">
<style>
p { font-family: Verdana, sans-serif; }
</style>
<script src="js/jquery-2.0.3.js"></script>
<script src="development-bundle/ui/jquery.ui.core.js"></script>
<script src...