control multiple tooltips at once

control multiple tooltips at once

by aybalasubramanian

HTML

<input type="checkbox" class="showName">
<br />
<br />
<br />
<br />
<div class="vis-item">Hover over me
  <span class="nameTagText">Tooltip text 1</span>
</div>
<br />
<br />
<br />
<br />
<div class="vis-item">Hover over me
  <span class="nameTagText">Tooltip text 2</span>
</div>
<br />
<br />
<br />
<br />
<div class="vis-item">Hover over me
  <span class="nameTagText">Tooltip text 3</span>
</div>

CSS

.vis-item {
    position: relative;
    display: inline-block;
}

.vis-item .nameTagText {
    visibility: hidden;
    min-width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

        .showAllNameTags{
visibility: visible !important;
        }

JavaScript

$(function () {
 $('.showName').change(function(){
    if(this.checked){
    	$('.nameTagText').addClass('showAllNameTags');
    }
    else{
    $('.nameTagText').removeClass('showAllNameTags');
    }
});

 });