@@ -1,19 +1,19 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" - "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> - <head> - <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> - <title>Simpltry Tooltip Demo</title> - <script src="../lib/prototype.js" type="text/javascript" charset="utf-8"></script> - <script src="../lib/builder.js" type="text/javascript" charset="utf-8"></script> - <script src="../src/simpltry_widget.js" type="text/javascript" charset="utf-8"></script> - <script src="../src/window_properties.js" type="text/javascript" charset="utf-8"></script> - <script src="../src/tooltip.js" type="text/javascript" charset="utf-8"></script> - <link href="css/layout.css" rel="stylesheet" type="text/css" /> - <link href="css/demo.css" rel="stylesheet" type="text/css" /> - </head> - <body id="tt_test"> - <div id="header"> + <head> + <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> + <title>Simpltry Tooltip Demo</title> + <script src="../lib/prototype.js" type="text/javascript" charset="utf-8"></script> + <script src="../lib/builder.js" type="text/javascript" charset="utf-8"></script> + <script src="../src/simpltry_widget.js" type="text/javascript" charset="utf-8"></script> + <script src="../src/window_properties.js" type="text/javascript" charset="utf-8"></script> + <script src="../src/tooltip.js" type="text/javascript" charset="utf-8"></script> + <link href="css/layout.css" rel="stylesheet" type="text/css" /> + <link href="css/demo.css" rel="stylesheet" type="text/css" /> + </head> + <body id="tt_test"> + <div id="header"> <h1>Simpltry Widget</h1> <ul class="navigation"> <li><a href="../index.html">home</a></li> @@ -24,20 +24,20 @@ </ul> </div> <ul id="demoTooltip" class="subnav" style="display:none"> - <li><a href="../demo/color_picker.html">Color Picker</a></li> - <li><a href="../demo/date_picker.html">Date Picker</a></li> - <li><a href="../demo/grid.html">Data Grid</a></li> - <li><a href="../demo/dialog.html">Dialog</a></li> - <li><a href="../demo/form.html">Form</a></li> - <li class="active">Tooltips</li> - <li><a href="../demo/rating_control.html">Rating</a></li> - <li><a href="../demo/ajax_updater.html">Ajax.Updater</a></li> + <li><a href="../demo/color_picker.html">Color Picker</a></li> + <li><a href="../demo/date_picker.html">Date Picker</a></li> + <li><a href="../demo/grid.html">Data Grid</a></li> + <li><a href="../demo/dialog.html">Dialog</a></li> + <li><a href="../demo/form.html">Form</a></li> + <li class="active">Tooltips</li> + <li><a href="../demo/rating_control.html">Rating</a></li> + <li><a href="../demo/ajax_updater.html">Ajax.Updater</a></li> </ul> - <h2>Simpltry Tooltip Widget</h2> + <h2>Simpltry Tooltip Widget</h2> <h2>simpltry_widget="mouseover_tooltip"</h2> <p>In this example we build our tooltip with a preexisting dom element. Mouse over the "anchor" text below to see a demo of the Mouseover Tooltip. When you don't include the "tooltip" option the widget just assumes you want to show the next dom element.</b> - <p class="anchor"simpltry_widget="mouseover_tooltip">anchor</p> - <div style="display:none;" class="simpltryTooltip">tooltip</div> + <p class="anchor"simpltry_widget="mouseover_tooltip">anchor</p> + <div style="display:none;" class="simpltryTooltip">tooltip</div> <div class="code"> <p>example markup:</p> @@ -46,10 +46,10 @@ <div id="anchor_tooltip" style="display:none;" class="simpltryTooltip">tooltip</div> </code></pre> </div> - + <h2>simpltry_widget="click_tooltip"</h2> <p>Sometimes all you need is a simple text only tooltip. Then it is much simpler to pass the option "tooltipText". This will create the necessary html at load time. If you choose to go this route you can style the toolip with the class "simpltryTooltip". This example also demonstrates that you can choose which direction you want your tooltip to display (currently only right and below are supported), if you choose right and your anchor is a block level element you will really need to specify a width on your anchor or else you tooltip will not display anywhere near your anchor</p> - <p class="anchor" style="width:10em;" simpltry_widget="click_tooltip" simpltry_options="tooltipText: 'this is adhock text', direction:'right'">adhock tooltip anchor</p> + <p class="anchor" style="width:10em;" simpltry_widget="click_tooltip" simpltry_options="tooltipText: 'this is adhock text', direction:'right'">adhock tooltip anchor</p> <div class="code"> <p>example markup:</p> <code><pre> @@ -71,12 +71,12 @@ </code></pre> </div> - <div id="footer"> - <p>From the writers of <a href="http://dcrails.com/">dcrails</a> | <a href="http://www.captureimportant.info">sidewalk</a></p> - <dl> - <dt>simpltry</dt> - <dd>The school of thought, where using the word simplicity negates the use for hard work, planning, forethought and original ideas - as if by magic.</dd> - </dl> - </div> - </body> + <div id="footer"> + <p>From the writers of <a href="http://dcrails.com/">dcrails</a> | <a href="http://www.captureimportant.info">sidewalk</a></p> + <dl> + <dt>simpltry</dt> + <dd>The school of thought, where using the word simplicity negates the use for hard work, planning, forethought and original ideas - as if by magic.</dd> + </dl> + </div> + </body> </html> \ No newline at end of file demo/tooltip.html d9e78112e9878157a1411a37fb7b63035c8122d1 Nicholas Schlueter schlueter@gmail.com http://github.com/schlueter/simpltryjs/commit/1545ac2d7d60a4f7762ef4235e5960a8e91d0c11 1545ac2d7d60a4f7762ef4235e5960a8e91d0c11

2008-04-04T22:09:50-07:00

removed tabs f892ee1f44f59afe3e98187c4ac910cd41a61e50 Nicholas Schlueter schlueter@gmail.com