HTML, CSS, jQueryでフォームに説明を入れるヘルプボタンを追加する

はじめに

いい感じのポップアップヘルパーがなかったので、自作してみました。クオリティは低いですがよろしくお願いします。（いい感じのポップアップヘルパー？がありましたら教えて下さい）

f:id:hagetak:20150201222729p:plain

本タイトルでは分かりにくいが、この画像を見れば分かるでしょ！

フォームによくあるヘルプボタンだ！本記事では、これを実装するコードを書きます。

下準備

はじめのコード

<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>

<style>

  .field {
    text-align: center;
    margin-bottom: 0.1em;
  }

  .field label {
    display:block;
    font-size: 1.4em;
    color: #bababa;
    text-shadow: #ffffff 0 1px 0;
  }
  .field-box {
   background: #ffffff;
   color: #423e3a;
   border: solid 4px #e5e5e5;
   padding:8px;
   margin-bottom:20px;
   width: 60%; 
   }
<style>

<div class="field field-name">
    <label for="message_password">パスワード</label><br> 
    <input class="field-box" id="message_password" placeholder="パスワードを入力" type="text" /> 
</div>

<div class="field field-body">
    <label for="message_password_re">パスワードの確認</label><br>
    <input class="field-box" id="message_password_re" type="text" />
</div>

上のコードを書くと、以下の様になる。これをいじって完成させていく。

f:id:hagetak:20150201223837p:plain

ヘルプボタンの追加（HTML）

<div class="field field-name">
       <label for="message_password">パスワード</label><br> 
       <input class="field-box" id="message_password" placeholder="パスワードを入力" type="text" />
       <input class="hatena_button" type="button" name="" value="？"> 
</div>

input にボタンを追加しているのがわかるだろう

この部分だ。このボタンに class: hatena_button を追加しておく。

次は、CSS を弄るぞ。

ヘルプボタンの追加（CSS）

  .hatena_button {
    background-color: #aaaaaa;
    color: #fff;
    border-radius: 100%;
    margin-left: 20px;
  }

これで、丸いボタンができる。

f:id:hagetak:20150201224624p:plain

吹き出しを作成（HTML）

ヘルプボタンを押したあとのフキダシを作成する。

 <input class="field-box" id="message_password" placeholder="パスワードを
入力" type="text" />
<input type="button" value="？" class="hatena_button">
<span class="help_message"></span>

これを追加。ボタンが押されたときにメッセージを表示させたいから、まずは非表示にする。（display: none）

ヘルプメッセージはあとで追加するからまだ書かないでね！

吹き出しを作成（CSS）

今のままだとダサいから、CSSを追加するよ。

.help_message {
    margin-left: 10px;
    width: 10%;
    display: none;
    position: absolute;
    word-wrap: break-word;
    margin-top: -2.5em;
    border: 1px solid #aaaaaa;
    padding: 4px;
    font-size: 0.5em;
  }

  .help_message:after {
    border:10px solid transparent;
    border-right-color:#aaaaaa;
    border-left-width:0;
    width:0;
    left:-10px;
    content:"";
    display:block;
    top:20px;
    position:absolute;
    margin-top: 1em;
  }

吹き出しを呼び出す

いよいよラスト、ボタンが押されたらメッセージを表示させるよ！

  $('.hatena_button').on('click', function(){
    if($('.help_message').text() === ""){
      $('.help_message').text("管理者(あなた)だけの パスワードです。 コメントや>写真の管理、 背景画像の変更などに 使用します。").fadeIn(500).css('display', 'inline');
    } else {
      $('.help_message').text("").css('display', 'none');
    }
  })

さて、このコードを紐解くと

$('.hatena_button').on('click', function(){})

はてなボタンがクリックされたら以下のスクリプトを動かす

if($('.help_message').text() === ''){ }

ヘルプメッセージがHTMLに描写されてなかったら...

$('.help_message').text('hgoehgoehgoe')

メッセージを追加。フェードインが欲しかったのでfadeInを追加しました。

ヘルプメッセージがHTMLに描写されていたら...

$('.help_message').text("").css('display', 'none');

メッセージを消す

こんなかんじです。少し分かりにくいコードだけど、少しずつ紐解いていくと分かるようになります！これを元に色々作ってみてはどうでしょうか？

hagetak's blog

どうも、はげたかです。