Unclosing Tooltip

Unclosing Tooltip

by shuNaka

HTML

<div>
  <div class="tltip-wrapper">
    <a href="#" class="switch">
      click me 1 </a>
    <div class="tltip-element" style="display: block;">
      <div class="tltip-content">
        <span>
          test_1
        </span>
        <span class="">
          test_2
        </span>
      </div>
    </div>


  </div>
  <div class="tltip-wrapper">
    <a href="#" class="switch">
      click me 2 </a>
    <div class="tltip-element">
      <div class="tltip-content">
        <span>
          test_1
        </span>
        <span class="">
          test_2
        </span>
      </div>
    </div>


  </div>
  <div class="tltip-wrapper">
    <a href="#" class="switch">
      click me 3 </a>
    <div class="tltip-element">
      <div class="tltip-content">
        <span>
          test_1
        </span>
        <span class="">
          test_2
        </span>
      </div>
    </div>
  </div>
  <div class="tltip-wrapper">
    <a href="#" class="switch">
      click me 4 </a>
    <div class="tltip-element">
      <div class="tltip-content">
        <span>
          test_1
        </span>
        <span class="">
          test_2
        </span>
      </div>
    </div>


  </div>
</div>

CSS

.tltip-wrapper {
  position: relative;
  cursor: default;
}

.tltip-wrapper .tltip-element {
  color: #525252;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 6px 12px rgba(155, 183, 182, 0.4);
  border: solid 1px #83A7AD;
  border-radius: 3px;
  padding: 12px 12px 12px 12px;
  font-size: 12px;
  text-align: left;
  display: none;
  position: absolute;
  left: 10%;
  top: -10%;
}

.tltip-wrapper .tltip-element .tltip-content {
  line-height: 0;
}

JavaScript

$('.switch').on('click touch', function (e) {
  $('.tltip-element').not($(this).parents('.tltip-wrapper').find('.tltip-element')).fadeOut('fast');
  $(this).parents('.tltip-wrapper').find('.tltip-element').fadeToggle('fast');
});