r3583 committed - tooltip: new default demo
Revision: 3583
Author: joern.zaefferer
Date: Fri Jan 1 05:04:01 2010
Log: tooltip: new default demo
http://code.google.com/p/jquery-ui/source/detail?r=3583
Modified:
/branches/dev/demos/tooltip/default.html
=======================================
--- /branches/dev/demos/tooltip/default.html Wed Dec 16 18:23:07 2009
+++ /branches/dev/demos/tooltip/default.html Fri Jan 1 05:04:01 2010
@@ -11,17 +11,26 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $("#progressbar").tooltip();
+ $("a, input").tooltip();
});
</script>
+ <style>
+ label { display: inline-block; width: 5em; }
+ </style>
</head>
<body>
<div class="demo">
- <div id="progressbar" class="ui-widget ui-widget-header" style="width:
100px; height: 2em;" title="only 47% remaining">
- <span style="float:left; width:53px; height: 100%"
class="ui-widget-content">At 53%</span>
- </div>
+ <a href="#" title="That's what this widget is">Tooltips</a> can be
attached to any element. When you hover
+ the element with your mouse, the title attribute is displayed in a little
box next to the element, just like a native tooltip.
+
+ But as it's not a native tooltip, it can be styled. Any themes built
with
+ <a href="http://themeroller.com" title="ThemeRoller, jQuery UI's theme
builder application">ThemeRoller</a>
+ will also style tooltip's accordingly.
+ Tooltip's are also useful for form elements, to show some additional
information in the context of each field.
+ <label for="age">Your age:</label><input id="age" title="We ask for
your age only for statistical purposes." />
+ Click the field to see the tooltip; when you tab out of the field, it
gets hidden.
</div><!-- End demo -->
@@ -29,7 +38,7 @@
<div class="demo-description">
-TODO
+Hover the links above or use the tab key to cycle the focus on each
element.
</div><!-- End demo-description -->
--