Skip to content

Commit b812596

Browse files
committed
Tooltip: Add demo with custom tooltip style.
1 parent 924e80e commit b812596

File tree

2 files changed

+112
-0
lines changed

2 files changed

+112
-0
lines changed

demos/tooltip/custom-style.html

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Tooltip - Default functionality</title>
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.tooltip.css">
7+
<script src="../../jquery-1.7.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.position.js"></script>
11+
<script src="../../ui/jquery.ui.tooltip.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<script>
14+
$(function() {
15+
$( ".demo" ).tooltip({
16+
open: function(event, ui) {
17+
$("<div>").addClass("arrow").appendTo(ui.tooltip);
18+
},
19+
position: {
20+
my: "center bottom",
21+
at: "center top",
22+
offset: "0 -20px"
23+
}
24+
});
25+
});
26+
</script>
27+
<style>
28+
label {
29+
display: inline-block;
30+
width: 5em;
31+
}
32+
.demo {
33+
margin: 10em 0 0 10em;
34+
}
35+
.ui-tooltip, .arrow:after {
36+
background: black;
37+
border: 2px solid white;
38+
}
39+
.ui-tooltip {
40+
display: inline-block;
41+
position: relative;
42+
padding: 10px 20px;
43+
color: white;
44+
border-radius: 20px;
45+
text-align: center;
46+
font: bold 14px "Helvetica Neue", Sans-Serif;
47+
font-stretch: condensed;
48+
text-decoration: none;
49+
text-transform: uppercase;
50+
box-shadow: 0 0 7px black;
51+
}
52+
.arrow {
53+
width: 70px;
54+
height: 16px;
55+
overflow: hidden;
56+
position: absolute;
57+
left: 50%;
58+
margin-left: -35px;
59+
bottom: -16px;
60+
}
61+
.arrow:after {
62+
content: "";
63+
position: absolute;
64+
left: 20px;
65+
top: -20px;
66+
width: 25px;
67+
height: 25px;
68+
-webkit-box-shadow: 6px 5px 9px -9px black,
69+
5px 6px 9px -9px black;
70+
-moz-box-shadow: 6px 5px 9px -9px black,
71+
5px 6px 9px -9px black;
72+
box-shadow: 6px 5px 9px -9px black,
73+
5px 6px 9px -9px black;
74+
-webkit-transform: rotate(45deg);
75+
-moz-transform: rotate(45deg);
76+
-ms-transform: rotate(45deg);
77+
-o-transform: rotate(45deg);
78+
}
79+
div[data-tooltip].active {
80+
opacity: 1;
81+
margin-top: 6px;
82+
}
83+
div[data-tooltip].out {
84+
opacity: 0;
85+
margin-top: -20px;
86+
}
87+
</style>
88+
</head>
89+
<body>
90+
91+
<div class="demo">
92+
93+
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
94+
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
95+
<p>But as it's not a native tooltip, it can be styled. Any themes built with
96+
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
97+
will also style tooltips accordingly.</p>
98+
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
99+
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
100+
<p>Hover the field to see the tooltip.</p>
101+
102+
</div><!-- End demo -->
103+
104+
105+
106+
<div class="demo-description">
107+
<p>Hover the links above or use the tab key to cycle the focus on each element.</p>
108+
</div><!-- End demo-description -->
109+
110+
</body>
111+
</html>

demos/tooltip/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<h4>Examples</h4>
1212
<ul>
1313
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
14+
<li><a href="custom-style.html">Custom style with arrow</a></li>
1415
<li><a href="forms.html">Forms with tooltips</a></li>
1516
<li><a href="tracking.html">Track the mouse</a></li>
1617
<li><a href="custom-animation.html">Custom animation</a></li>

0 commit comments

Comments
 (0)