▼フォーム要素をクリックすると、右側にツールチップが表示されます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jQuery Input Floating Hint Box | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script src="/content/lib/jquery/jquery.jquery.dimensions-1.2.js" type="text/javascript"></script> <script src="/content/lib/jquery/jquery.inputHintBox.js" type="text/javascript"></script> <script type='text/javascript'> $(function() { $('.titleHintBox').inputHintBox({div:$('#shiny_box'),div_sub:'.shiny_box_body',source:'attr',attr:'title',incrementLeft:5}); $('.titleHintBox2').inputHintBox({className:'simple_box',source:'attr',attr:'title',incrementLeft:50}); $('.titleHintBox3').inputHintBox({className:'simple_box',html:'オプションの「html」でツールチップを指定しています。',incrementLeft:5}); }); </script> <!-- CSS --> <style type="text/css"> label { width:10em; display:block; float:left; clear:left; text-align:right; padding-right:1em; } p.group { margin-left:11em; } p.group label { width:auto; display:inline; float:none; padding:0; } .textstyle { border-color:#a7a7a7 #ccc #ccc #ccc; border-style:solid; border-width:1px; color:#555; } .alignToRight { text-align:right; vertical-align:top; } /* 角丸ツールチップ */ .tl, .tr, .bl, .br { background:url(/content/img/ajax/corners.gif); width:10px; height:10px; font-size:0; } .tl, .bl { float:left; } .tr, .br { float:right; } .shiny_box { background:#0066FF; color:#FFF; width:210px; overflow:hidden; } .shiny_box p { margin:10px; } .shiny_box .tl { background-position:-340px 0; } .shiny_box .tr { background-position:-350px 0; } .shiny_box .bl { background-position:-340px 10px; } .shiny_box .br { background-position:-350px 10px; } .shiny_box_body { clear:both; padding:0 10px; overflow:hidden; } * html .shiny_box_body { height:1% } .simple_box { width:200px; padding:10px; background-color:#d9e6f7; border:3px solid green; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1><a href='http://nicolae.namolovan.googlepages.com/jquery.inputHintBox.html'>jQuery Input Floating Hint Box</a> | 設置サンプル</h1> <p>▼フォーム要素をクリックすると、右側にツールチップが表示されます。</p> <!-- CODE --> <form action="#"> <p> <label for="input_text_0">ユーザー名:</label> <input type="text" id="input_text_0" class="textstyle titleHintBox" title="<strong>ユーザー名</strong>を入力してください。"> </p> <p> <label for="input_text_1">パスワード:</label> <input type="password" id="input_text_1" class="textstyle titleHintBox" title="<strong>パスワード</strong>を4文字以上8文字以内で入力してください。"> </p> <p> <label for="input_text_2">コメント:</label> <textarea id="input_text_2" cols="50" rows="5" class="textstyle titleHintBox2" title="「incrementLeft:50」を指定して、input要素から50px離れた位置にツールチップを表示しています。"></textarea> </p> <p> <label for="input_text_3">その他1:</label> <input type="text" id="input_text_3" class="textstyle titleHintBox3"> </p> <p> <label for="input_text_4">その他2:</label> <input type="text" id="input_text_4" class="textstyle titleHintBox3"> </p> <p> <label for="input_text_5">その他3:</label> <input type="text" id="input_text_5" class="textstyle titleHintBox3"> </p> <p> <label for="select_0">セレクトボックス:</label> <select id="select_0" class="textstyle titleHintBox" title="選択してください"> <option>項目1</option> <option>項目2</option> <option>項目3</option> <option>項目4</option> <option>項目5</option> </select> </p> <p class="group"> <label for="c1"><input type="checkbox" id="c1" class="titleHintBox" title="チェックボックスのヘルプ1"> 項目1</label> <label for="c2"><input type="checkbox" id="c2" class="titleHintBox" title="チェックボックスのヘルプ2"> 項目2</label> <label for="c3"><input type="checkbox" id="c3" class="titleHintBox" title="チェックボックスのヘルプ3"> 項目3</label> </p> <p class="group"> <label for="r1"><input type="radio" id="r1" name="r" class="titleHintBox" title="ラジオボタンのヘルプ1"> 項目1</label> <label for="r2"><input type="radio" id="r2" name="r" class="titleHintBox" title="ラジオボタンのヘルプ2"> 項目2</label> <label for="r3"><input type="radio" id="r3" name="r" class="titleHintBox" title="ラジオボタンのヘルプ3"> 項目3</label> </p> <p> <input type="button" id="btn" class="titleHintBox" title="ボタンにもツールチップを表示できます。" value="ボタン" /> </p> </form> <!-- ツールチップ用 --> <div id="shiny_box" class="shiny_box" style="display:none;"> <span class="tl"></span><span class="tr"></span> <div class="shiny_box_body"></div> <span class="bl"></span><span class="br"></span> </div> <!-- CODE / --> </div> </body> </html>