cherryrep/tooltip.html at master · xtomflo/cherryrep · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI Tooltip - Default functionality</title>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css">

  <script>

  $(function() {

    $( document ).tooltip();

  });

  </script>

  <style>

  label {

    display: inline-block;

    width: 5em;

  }

  </style>

</head>

<body>


<p><a href="#" title="That&apos;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://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;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>


</body>

</html>