From 3909e6d89e01e4cd8777377c63037896bb95aa2f Mon Sep 17 00:00:00 2001
From: Leif Johansson <leifj@sunet.se>
Date: Fri, 25 Nov 2011 21:18:19 +0100
Subject: new jq layout
---
.../demos/tooltip/custom-style.html | 111 +++++++++++++++++++++
1 file changed, 111 insertions(+)
create mode 100644 src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html
(limited to 'src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html')
diff --git a/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html
new file mode 100644
index 0000000..3df94c4
--- /dev/null
+++ b/src/main/webapp/jquery-ui-1.9pre/demos/tooltip/custom-style.html
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Tooltip - Default functionality</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.tooltip.css">
+ <script src="../../jquery-1.7.1.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.position.js"></script>
+ <script src="../../ui/jquery.ui.tooltip.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( ".demo" ).tooltip({
+ open: function(event, ui) {
+ $("<div>").addClass("arrow").appendTo(ui.tooltip);
+ },
+ position: {
+ my: "center bottom",
+ at: "center top",
+ offset: "0 -20px"
+ }
+ });
+ });
+ </script>
+ <style>
+ label {
+ display: inline-block;
+ width: 5em;
+ }
+ .demo {
+ margin: 10em 0 0 10em;
+ }
+ .ui-tooltip, .arrow:after {
+ background: black;
+ border: 2px solid white;
+ }
+ .ui-tooltip {
+ display: inline-block;
+ position: relative;
+ padding: 10px 20px;
+ color: white;
+ border-radius: 20px;
+ text-align: center;
+ font: bold 14px "Helvetica Neue", Sans-Serif;
+ font-stretch: condensed;
+ text-decoration: none;
+ text-transform: uppercase;
+ box-shadow: 0 0 7px black;
+ }
+ .arrow {
+ width: 70px;
+ height: 16px;
+ overflow: hidden;
+ position: absolute;
+ left: 50%;
+ margin-left: -35px;
+ bottom: -16px;
+ }
+ .arrow:after {
+ content: "";
+ position: absolute;
+ left: 20px;
+ top: -20px;
+ width: 25px;
+ height: 25px;
+ -webkit-box-shadow: 6px 5px 9px -9px black,
+ 5px 6px 9px -9px black;
+ -moz-box-shadow: 6px 5px 9px -9px black,
+ 5px 6px 9px -9px black;
+ box-shadow: 6px 5px 9px -9px black,
+ 5px 6px 9px -9px black;
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ -o-transform: rotate(45deg);
+ }
+ div[data-tooltip].active {
+ opacity: 1;
+ margin-top: 6px;
+ }
+ div[data-tooltip].out {
+ opacity: 0;
+ margin-top: -20px;
+ }
+ </style>
+</head>
+<body>
+
+<div class="demo">
+
+<p><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.</p>
+<p>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 tooltips accordingly.</p>
+<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
+<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
+<p>Hover the field to see the tooltip.</p>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
--
cgit v1.1