特定の項目に力ーソルをのせた時に吹き出しのようなツールチップを表示させる方法【jQuery】

ツールチップの作成方法。

HTML

<!DOCTYPE html>
  <head>
  <html lang="ja">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>ツールチップ</title>
  <meta name="description" content="ツールチップの作り方">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="function.js"></script>
</head>
<body>
  <div class="contract">
   <table>
    <tr>
      <th>性別</th>
      <td>
      <p>
      <label><input type="radio" name="#" value="#">男性</label>
      <label><input type="radio" name="#" value="#">女性</label>
      </p>
      </td>
    </tr>
    <tr>
      <th scope="row"><div class="pin">暗証番号
      <img class="question" src="question.png">
    </div>
    </th>
    <td><input type="password" oncopy="return false" autocomplete="off" maxlength="10"></td>
    </tr>
   </table>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>ツールチップ</title>

</head>

<body>

<table>

<tr>

<td>

<p>

</p>

</td>

</tr>

<tr>

<th scope="row"><div class="pin">暗証番号

</div>

</th>

</tr>

</table>

</div>

</body>

</html>

CSS

table {
  width: 500px;
  background: #fff;
  border-collapse: collapse;
  border-spacing: 0;
}
table th,
table td {
  padding: 10px;
  border: 1px solid #ccc;
  vertical-align: middle;
}
table th{background: #eeeeee;}
label{margin-right: 10px;}
input[type="password"]{
  margin: 0;
  padding: 4px;
  border: 2px #cccccc inset;
}

.question{
  position: relative;
  top: 6px;
  cursor: pointer;
}

table {

width: 500px;

background: #fff;

border-collapse: collapse;

border-spacing: 0;

}

table th,

table td {

padding: 10px;

border: 1px solid #ccc;

vertical-align: middle;

}

table th{background: #eeeeee;}

label{margin-right: 10px;}

input[type="password"]{

margin: 0;

padding: 4px;

border: 2px #cccccc inset;

}

.question{

position: relative;

top: 6px;

cursor: pointer;

}

↓ブラウザで見ると、こんな感じの見た目になります。

続いて、 jQueryの.prependメソッドを利用し、アイコンの上にカーソルを乗せると、吹き出しが表示され、逆にアイコンからカーソルを外すと吹き出しが消える様に設定します。

jQuery

$(document).ready(function() {
  $('.pin').prepend('<div class="tool_tips">暗証番号とは、サービスへのログインや支払い手続きを行うときに利用する4桁の数字です。<div class="balloon"></div>');
  $('.question,.tool_tips').hover(function() {
    $('.tool_tips').css('display','block');
  },
  function() {
    $('.tool_tips').css('display','none');
  });
});

$(document).ready(function() {

$('.pin').prepend('<div class="tool_tips">暗証番号とは、サービスへのログインや支払い手続きを行うときに利用する4桁の数字です。<div class="balloon"></div>');

$('.question,.tool_tips').hover(function() {

$('.tool_tips').css('display','block');

function() {

$('.tool_tips').css('display','none');

});

あとは、CSSで吹き出しの見た目を整えてあげれば、完成です。

table {
  width: 500px;
  background: #fff;
  border-collapse: collapse;
  border-spacing: 0;
}
table th,
table td {
  padding: 10px;
  border: 1px solid #ccc;
  vertical-align: middle;
}
table th{background: #eeeeee;}
label{margin-right: 10px;}
input[type="password"]{
  margin: 0;
  padding: 4px;
  border: 2px #cccccc inset;
}

.question{
  position: relative;
  top: 6px;
  cursor: pointer;
}


/* 追記（ツールチップ用のCSS）*/ 
.pin{
  position: relative;
}

.tool_tips{
  display: none;
  padding: 12px;
  background-color: #fffaf0;
  border: 1px solid #ffa500;
  font-size: 16px;
  width: 280px;
  position: absolute;
  top: 50px;
  left: 50px;
  text-align: left;
  z-index: 99;
  border-radius: 5px
}

.balloon{
  width: 400px;
  height: 20px;
  background-image: url(baloon_arrow.png);
  background-repeat: no-repeat;
  background-position: 100px 0;
  position: absolute;
  top: -17px;
  left: -33px;
}