如何使工具提示可见点击一个图标和隐藏时，点击相同的图标?

function toggleTips () {
$(".tooltip").each(function() {
$(this).toggleClass("hidden")
})
}
$("#toggle-tips").on("click", function() {
toggleTips();
})

body {
font-family: Sans-serif
}
table {
border-collapse: collapse;
}
thead {
background: lightgray;
}
table, th, td {
border: 1px solid gray;
}
th, td {
position: relative;
padding: 10px
}
.tooltip {
box-shadow: 3px 3px 10px 0 rgba(0,0,0,.5);
padding: 10px;
position: absolute;
background: white;
white-space: nowrap;
font-weight: normal;
z-index: 2;
}
.hidden {
display: none;
}
button {
margin-top: 10px;
background: lightgray;
padding: 10px;
border: 0;
border-radius: 10px;
}
button:hover {
background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th>First Name <span class="tooltip hidden">User's first name</span></th>
<th>Last Name</th>
<th>Phone #</th>
</thead>
<tbody>
<td>Jane</td>
<td>Doe</td>
<td>0123456789<span class="tooltip hidden">User's phone number</span></td>
</tbody>
</table>
<button id="toggle-tips">Toggle Tips</button>

$(function(){

$(".info").click(function(){
var left = $("img",this).offset().left + ($("img",this).width()/2) - ($(".tip", this).width()/2);
$(".tip", this).toggle().css({"left":left});

});

});

.info .tip{ 
display: none;
position: absolute;
border: 1px solid #333;
border-radius: 2px;
padding: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="info"><img src="http://blog.flattr.net/wp-content/uploads/2011/09/stackoverflow.png" />

<div class="tip">tool tip text</div>
</div>

来源- http://jsfiddle.net/NPXaf/