連続する親要素でそれぞれの特定子要素をクリックしたら別の子要素を表示・非表示したい

連続する親要素でそれぞれの特定子要素をクリックしたら別の子要素を表示・非表示したいです。

構成は以下の通りです。

「sample_table」の各tdごとの「trigger」をクリックすることで「tooltips」を表示・非表示したいです。

lang
1<table class="sample_table">
2  <tbody>
3    <tr>
4    <td><img src="XXXXXXX.png" class="trigger"><div class="tooltips"></div></td>
5    <td><img src="XXXXXXX.png" class="trigger"><div class="tooltips"></div></td>
6    <td><img src="XXXXXXX.png" class="trigger"><div class="tooltips"></div></td>
7    </tr>
8    <tr>
9    <td><img src="XXXXXXX.png" class="trigger"><div class="tooltips"></div></td>
10    <td><img src="XXXXXXX.png" class="trigger"><div class="tooltips"></div></td>
11    <td><img src="XXXXXXX.png" class="trigger"><div class="tooltips"></div></td>
12    </tr>
13    <tr>
14    <td><img src="XXXXXXX.png" class="trigger"><div class="tooltips"></div></td>
15    <td><img src="XXXXXXX.png" class="trigger"><div class="tooltips"></div></td>
16    <td><img src="XXXXXXX.png" class="trigger"><div class="tooltips"></div></td>
17    </tr>
18  </tbody>
19</table>

lang
1.sample_table td {
2  position:relative;
3}
4
5.trigger {
6  position: absolute;
7  top:5px;
8  right:5px;
9  cursor:pointer;
10  z-index: 9999;
11	}
12
13.tooltips {
14  display: none;
15  position: absolute;
16  top: -50%;
17  left: 100px;
18  z-index: 9999;
19  padding:10px;
20  color: #FFFFFF;
21  background: #e60012;
22  border-radius:5px;
23  width:inherit;
24  min-width:150px;
25}

lang
1$('.sample_table td').each(function() {
2    var $hoge = $(this);
3    var $trigger = $hoge.children('.trigger');
4    var $tooltips = $hoge.children('.tooltips');
5    $trigger.click(function(){
6    $tooltips.toggle(true);
7    });
8});