jQuery InputHintBox

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html>
3

<head>
4

<title>jQuery Input Floating Hint Box - Demo - Examples</title>
5

</head>
9

<body>
10

<style>
16

body {
17

color:#000;
18

min-width: 600px;
19

font-family: arial,helvetica,clean,sans-serif;
20

font-size: 9pt;
21

line-height: 1.32em;
22

}
23

.textstyle {
24

font-size:100%;
25

font-family: Arial,Helvetica,sans-serif;
26

border-color: #A7A7A7 #CCCCCC #CCCCCC #CCCCCC;
27

border-style:solid;
28

border-width:1px;
29

color:#555555;
30

font-size:1em;
31

}
32

.alignToRight {
33

text-align:right;
34

vertical-align:top;
35

}
36

/* Some round fancies */
37

.tl, .tr, .bl, .br {
38

background: url(corners.gif);
39

width: 10px;
40

height: 10px;
41

font-size: 0;
42

}
43

.tl, .bl {
45

float: left;
46

}
47

.tr, .br {
48

float: right;
49

}
50

.shiny_box {
52

background: #0066FF;
53

color: #FFF;
54

width: 210px;
55

overflow: hidden;
56

}
57

.shiny_box p {
58

margin:10px;
59

}
60

.shiny_box .tl {
62

background-position: -340px 0px;
63

}
64

.shiny_box .tr {
65

background-position: -350px 0px;
66

}
67

.shiny_box .bl {
68

background-position: -340px 10px;
69

}
70

.shiny_box .br {
71

background-position: -350px 10px;
72

}
73

.shiny_box_body {
75

clear: both;
76

padding: 0 10px;
77

overflow: hidden;
78

}
79

* html .shiny_box_body {
80

height: 1%;
81

}
82

.simple_box {
84

width:200px;
85

padding:10px;
86

background-color:#D9E6F7;
87

border:3px solid green;
88

}
89

</style>
90

91

<h1 align="center">jQuery InputHintBox</h1>
92

<div style="margin-left:100px">
93

Click on some input element
95

<table cellpadding="4">
97

<tr>
98

<td class="alignToRight">
99

<label for="input_text_0">Username:</label>
100

101

</td>
102

<td>
103

<input type="text" id="input_text_0" class="textstyle titleHintBox" title="Username, you can use htmlUsername, you can use htmlUsername, you can use htmlUsername, you can use htmlUsername, you can use html">
104

</td>
105

</tr>
106

<tr>
107

<td class="alignToRight">
108

<label for="input_text_1">Password:</label>
109

</td>
110

111

<td>
112

<input type="text" id="input_text_1" class="textstyle titleHintBox" title="Password, make it longer">
113

</td>
114

</tr>
115

<tr>
116

<td class="alignToRight">
117

<label for="input_text_2">Other:</label>
118

</td>
119

<td>
120

121

<input type="text" id="input_text_2" class="textstyle titleHintBox2" title="This a simple box with a class as style Other bla bla bla Other bla bla blaOther bla bla blaOther bla bla blaOther bla bla blaOther bla bla bla">
122

</td>
123

</tr>
124

<tr>
125

<td class="alignToRight">
126

<label for="input_text_3">Other Same1:</label>
127

</td>
128

<td>
129

<input type="text" id="input_text_3" class="textstyle titleHintBox3">
130

131

</td>
132

</tr>
133

<tr>
134

<td class="alignToRight">
135

<label for="input_text_4">Other Same2:</label>
136

</td>
137

<td>
138

<input type="text" id="input_text_4" class="textstyle titleHintBox3">
139

</td>
140

141

</tr>
142

<tr>
143

<td class="alignToRight">
144

<label for="input_text_5">Other Same3:</label>
145

</td>
146

<td>
147

<input type="text" id="input_text_5" class="textstyle titleHintBox3">
148

</td>
149

</tr>
150

<tr>
151

152

<td class="alignToRight">
153

<label for="select_0">Select box:</label>
154

</td>
155

<td>
156

<select id="select_0" class="textstyle titleHintBox" title="Select hint..">
157

<option>Option 1</option>
158

<option>Option 2</option>
159

160

<option>Option 3</option>
161

<option>Option 4</option>
162

</select>
163

</td>
164

</tr>
165

<tr>
166

<td class="alignToRight">
167

 
168

</td>
169

170

<td>
171

<label for="checkbox">
172

<input type="checkbox" id="checkbox" class="titleHintBox" title="Checkbox help"> Checkbox
173

</label>
174

</td>
175

</tr>
176

</table>
177

178

<div>
179

Js used: 
180

181

182

<pre>
183

$('.titleHintBox').inputHintBox({div:$('#shiny_box'),div_sub:'.shiny_box_body',source:'attr',attr:'title',incrementLeft:5});
184

185

$('.titleHintBox2').inputHintBox({className:'simple_box',source:'attr',attr:'title',incrementLeft:5});
186

187

$('.titleHintBox3').inputHintBox({className:'simple_box',html:'Same text for more inputs',incrementLeft:5});</pre>
188

189

190

191

192

193

194

195

</div>
196

197

</div>
198

199

<div id="shiny_box" class="shiny_box" style="display:none;">
200

201

<div class="shiny_box_body"></div>
202

203

204

</div>
205

206

207

208

<script>
209

$().ready(function(){
210

$('.titleHintBox').inputHintBox({div:$('#shiny_box'),div_sub:'.shiny_box_body',source:'attr',attr:'title',incrementLeft:5});
211

$('.titleHintBox2').inputHintBox({className:'simple_box',source:'attr',attr:'title',incrementLeft:5});
212

$('.titleHintBox3').inputHintBox({className:'simple_box',html:'Same text for more inputs',incrementLeft:5});
213

});
214

</script>
215

216

</body>
217

</html>