Result
jQuery
result,js,css,html //フォーカスイベント $('.use-guide').focus(function() { //ツールチップ id = $(this).attr('id'); $('.guide-tip[rel='+id+']').fadeIn(); }).blur(function() { $('.guide-tip[rel='+id+']').fadeOut(); }); |
css
input[type="text"] { width:400px; padding:10px; border-radius:5px; /*optional*/ color:#666; font-size:.875em; outline:none; background:#f6f6f6; border-width: 1px; border-style: solid; border-color: rgba(0,0,0,.2); } .input-line { position:relative; } .guide-tip { display:none; bottom:-90px; z-index:2000; position:absolute; width:390px; padding:10px 15px; margin:10px 0; background:#eaeaea; border-width: 1px; border-style: solid; border-color: rgba(0,0,0,.1); color:#999; font-size:.875em; } .guide-tip .arrow { position:absolute; top:-8px; left:15px; z-index:1000; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #eaeaea; } .guide-tip .arrow.border { top:-9px; left:14px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 9px solid #ccc; } |
html
<div class="input-line"><div class="guide-tip" rel="title"> <div class="arrow border"></div> <div class="arrow"></div> <em>Please follow the instruction :</em> <br> <strong>Don't use bad word!</strong></div><input type="text" name="title" id="title" placeholder="input something ..." class="use-guide"></div> |
via
JS Bin
...
jsbin.com
