Using Prototip - Basic Implementation (
Page 2 of 4 )
Now that we're ready to put Prototip to use, let's make a basic example page that has some images on it which will produce the tooltips when they are hovered over -- something like the following screen shot:
In a new page in your text editor start with the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/prototip.css">
<link rel="stylesheet" type="text/css" href="../css/mytips.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Prototip Example</title>
</head>
<body>
<div id="container">
<label>Option 1</label><select><option>Choose an Option</option></select><a class="tip" id="help1" href="#" title="Help for option 1"></a>
<label>Option 2</label><select><option>Choose an Option</option></select><a class="tip" id="help2" href="#" title="Help for option 2"></a>
<label>Option 3</label><select><option>Choose an Option</option></select><a class="tip" id="help3" href="#" title="Help for option 3"></a>
<label>Option 4</label><select><option>Choose an Option</option></select><a class="tip" id="help4" href="#" title="Help for option 4"></a>
<label>Option 5</label><select><option>Choose an Option</option></select><a class="tip" id="help5" href="#" title="Help for option 5"></a>
</div>
<script type="text/javascript" src="../scriptaculous-js-1.8.2/lib/prototype.js"></script>
<script type="text/javascript" src="../scriptaculous-js-1.8.2/src/effects.js"></script>
<script type="text/javascript" src="../js/prototip.js"></script>
</body>
</html>
Save this as
prototip1.html
in your
pages
folder. It is essential that pages which use the Prototip plugin are placed in a folder at the same directory level as the images folder. This is because some of the elements that make up the tooltips have style attributes written to them when they are dynamically created by the plugin.
Our page contains the elements making up our test form; the labels, selects and the links that we're going to use as the tooltip triggers. Each link has several attributes, including a title for use in situations where JavaScript is disabled. This is an important aspect of progressive enhancement, in which we define an inner core of base content, then where possible extend it. Following this we link to the Prototype, Scriptaculous and Prototip script files.
/ 5 
