<html>
<head>
<title>Form field tooltip</title>
<style type="text/css">
body{
background-color:#EEE;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
}
fieldset{
width:720px;
}
</style>
<link rel="stylesheet" href="css/form-field-tooltip.css" media="screen" type="text/css">
<script type="text/javascript" src="js/rounded-corners.js"></script>
<script type="text/javascript" src="js/form-field-tooltip.js"></script>
</head>
<body>
<div id="mainContainer">
<fieldset>
<legend>Description</legend>
<div>This is a demo of the form field tooltip script. The tooltip is being displayed when you move focus to one of the inputs on the page.</div>
</fieldset>
<fieldset>
<legend>Form field tooltip example</legend>
<table>
<tr>
<td><label for="firstname">First name:</label></td>
<td><input type="text" id="firstname" name="firstname" tooltipText="Type in your firstname in this box"></td>
</tr>
<tr>
<td><label for="lastname">Last name:</label></td>
<td><input type="text" id="lastname" name="lastname" tooltipText="Type in your last name in this box"></td>
</tr>
<tr valign="top">
<td><label for="address">Address:</label></td>
<td><textarea id="address" name="address" tooltipText="This is the box for the address"></textarea></td>
</tr>
<tr valign="top">
<td>Nationality</td>
<td><select style="width:300px"><option>It covers this select box in IE</option></select></td>
</tr>
</table>
</fieldset>
</div>
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.setTooltipPosition('right');
tooltipObj.setPageBgColor('#EEEEEE');
tooltipObj.setTooltipCornerSize(15);
tooltipObj.initFormFieldTooltip();
</script>
</body>
</html>
'WEB > HTML/Css/Script' 카테고리의 다른 글
| 단어 더블 클릭시 네이버 검색 기능 (0) | 2007/09/25 |
|---|---|
| 이미지 팝업 레이어(확대/축소/드래그) (0) | 2007/08/16 |
| 폼 툴팁 (0) | 2007/08/16 |
| 셀렉트 메뉴목록을 다른 셀렉트로 이동 (0) | 2007/08/16 |
| CSS 예제 사이트 모음 (0) | 2007/07/28 |
| Advanced CSS Layouts: Step by Step (0) | 2007/07/28 |
0 Trackback,
0 Comment,
:




form-field-tooltip.zip
최근에 달린 댓글
링크
최근에 받은 트랙백
태그목록