폼입력창에 말풍선도움말 보이기 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > JAVASCRIPT > javascript 소스창고 > 폼 관련 > 폼입력창에 말풍선도움말 보이기 상세정보

클라우드태그

Javascript

PHP

ASP

css

html

mysql

jquery

image

API

Mobile

메뉴

slide

게시판

현재접속자 명

폼입력창에 말풍선도움말 보이기

해피팀

네티즌

소스분류

폼 관련

다운로드 횟수

1074 회

간단설명

각각의 폼 입력창을 클릭하면 도움말 말풍선이 나타납니다.

평가하기

입력창과 폼을 확인하시고 클릭합니다.
name라는 폼을 클릭하면 아래와 같이 말풍선이 나타납니다. 이 도움말 말풍선에 close를 클릭하면 말풍선은 사라지게 됩니다.
다른 폼을 클릭하면 다른 말풍선이 나타나게 되며 Don't show this message again 을 클릭하면 말풍선은 나타나지 않게 됩니다.

아래는 본 예제의 자바스크립트입니다.

<html>
<head>
    <title>http://www.happycgi.com</title>

    <link rel="stylesheet" href="css/form-field-tooltip.css" media="screen" type="text/css">
    <script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/js/rounded_corners.js"></script>
    <script type="text/javascript" src="http://www.blueb.co.kr/SRC/javascript/js/formfieldtooltip.js"></script>

</head>
<style>
#DHTMLgoodies_formTooltipDiv{
    color:#FFF;
    font-family:arial;
    font-weight:bold;
    font-size:11px;
    line-height:120%;
}
.DHTMLgoodies_formTooltip_closeMessage{
    color:#FFFFFF;
    font-weight:normal;
    font-size:11px;
}

</style>
<body>
각각의 입력폼을 클릭해보세요

        <table>
            <tr>
                <td><label for="lastname">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><label for="address">email:</label></td>
                <td><input id="email" name="email" tooltipText="This is the box for the email"></td>
            </tr>
        </table>