JSFiddle - React, Tailwind, and code Playground

by Tony Realovich

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="has-tooltip">
  <span>Текст 1</span>
  <div class="tooltip">
    Тултип 1
  </div>
</div>

<div class="has-tooltip">
  <span>Текст 2</span>
  <div class="tooltip">
    Тултип 2
  </div>
</div>

<div class="has-tooltip">
  <span>Текст 3</span>
  <div class="tooltip">
    Тултип 3
  </div>
</div>

CSS

.has-tooltip {
  position: relative;
  margin-top: 20px;
}

.tooltip {
  display: none;
  position: absolute;
}

JavaScript

//TOOLTIP
$('.has-tooltip').on('click touchstart', function(e) {
  $('.has-tooltip').not(this).children('.tooltip').hide();
  $(this).children('.tooltip').show();
  e.stopPropagation();
});

$(document).on('click touchstart', function(e) {
  $('.tooltip').hide();
});
//--TOOLTIP