|
7
|
1 <!doctype html>
|
|
|
2 <html lang="en">
|
|
|
3 <head>
|
|
|
4 <meta charset="utf-8">
|
|
|
5 <title>jQuery UI Tooltip - Custom Styling</title>
|
|
|
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.tooltip.css">
|
|
|
7 <script src="../../jquery-1.10.2.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 $( document ).tooltip({
|
|
|
16 position: {
|
|
|
17 my: "center bottom-20",
|
|
|
18 at: "center top",
|
|
|
19 using: function( position, feedback ) {
|
|
|
20 $( this ).css( position );
|
|
|
21 $( "<div>" )
|
|
|
22 .addClass( "arrow" )
|
|
|
23 .addClass( feedback.vertical )
|
|
|
24 .addClass( feedback.horizontal )
|
|
|
25 .appendTo( this );
|
|
|
26 }
|
|
|
27 }
|
|
|
28 });
|
|
|
29 });
|
|
|
30 </script>
|
|
|
31 <style>
|
|
|
32 .ui-tooltip, .arrow:after {
|
|
|
33 background: black;
|
|
|
34 border: 2px solid white;
|
|
|
35 }
|
|
|
36 .ui-tooltip {
|
|
|
37 padding: 10px 20px;
|
|
|
38 color: white;
|
|
|
39 border-radius: 20px;
|
|
|
40 font: bold 14px "Helvetica Neue", Sans-Serif;
|
|
|
41 text-transform: uppercase;
|
|
|
42 box-shadow: 0 0 7px black;
|
|
|
43 }
|
|
|
44 .arrow {
|
|
|
45 width: 70px;
|
|
|
46 height: 16px;
|
|
|
47 overflow: hidden;
|
|
|
48 position: absolute;
|
|
|
49 left: 50%;
|
|
|
50 margin-left: -35px;
|
|
|
51 bottom: -16px;
|
|
|
52 }
|
|
|
53 .arrow.top {
|
|
|
54 top: -16px;
|
|
|
55 bottom: auto;
|
|
|
56 }
|
|
|
57 .arrow.left {
|
|
|
58 left: 20%;
|
|
|
59 }
|
|
|
60 .arrow:after {
|
|
|
61 content: "";
|
|
|
62 position: absolute;
|
|
|
63 left: 20px;
|
|
|
64 top: -20px;
|
|
|
65 width: 25px;
|
|
|
66 height: 25px;
|
|
|
67 box-shadow: 6px 5px 9px -9px black;
|
|
|
68 -webkit-transform: rotate(45deg);
|
|
|
69 -moz-transform: rotate(45deg);
|
|
|
70 -ms-transform: rotate(45deg);
|
|
|
71 -o-transform: rotate(45deg);
|
|
|
72 tranform: rotate(45deg);
|
|
|
73 }
|
|
|
74 .arrow.top:after {
|
|
|
75 bottom: -20px;
|
|
|
76 top: auto;
|
|
|
77 }
|
|
|
78 </style>
|
|
|
79 </head>
|
|
|
80 <body>
|
|
|
81
|
|
|
82 <p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
|
|
|
83 the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
|
|
|
84 <p>But as it's not a native tooltip, it can be styled. Any themes built with
|
|
|
85 <a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
|
|
|
86 will also style tooltips accordingly.</p>
|
|
|
87 <p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
|
|
|
88 <p><label for="age">Your age:</label> <input id="age" title="We ask for your age only for statistical purposes."></p>
|
|
|
89 <p>Hover the field to see the tooltip.</p>
|
|
|
90
|
|
|
91 <div class="demo-description">
|
|
|
92 <p>Hover the links above or use the tab key to cycle the focus on each element.</p>
|
|
|
93 </div>
|
|
|
94 </body>
|
|
|
95 </html>
|
