JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<button style="margin: 200px;" data-tooltip="This is a tooltipThis is a ltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tootooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is his is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is his is a tooltipThis is a tooltipThis is a tooltipThis is a tooltipThis is his is a tooltipThis is a tooltipThis is a tooltipThistooltipThis is a tooltip"
  class="tooltipTarget">orempaks[djo[psad</button>

CSS

button.tooltipTarget {
position: relative;
}
p.tooltip.active {
position: absolute; 
bottom: 100%; 
left: 50%; 
width: 400px;
   
transform: translateX(-50%);
}
.tooltip {
  margin-top: -45px;
  opacity: 1;
  transition: 0.3s ease-in-out;
  position: absolute;
  border-radius: 1px;
  color: #767676;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  background: #f7f7f7;
  padding: 10px;
  font-size: 12px;
  text-align: left;
  z-index: 10;
  max-width: 250px;
  &.active {
    opacity: 1;
  }
}
.tooltip::before {
  content: '';
  display: inline-block;
  height: 0;
  width: 0;
  position: absolute;
  z-index: 10;
  bottom: -14px;
  right: 50%;
  right: calc(50% - 7px);
  border-left: solid 7px transparent;
  border-right: solid 7px transparent;
  border-bottom: solid 7px transparent;
  border-top: solid 7px #f7f7f7;
}
.tooltip::after {
  content: '';
  display: inline-block;
  height: 0;
  width: 0;
  position: absolute;
  z-index: 9;
  bottom: -15px;
  right: 50%;
  right: calc(50% - 7px);
  border-left: solid 7px transparent;
  border-right: solid 7px transparent;
  border-bottom: solid 7px transparent;
  border-top: solid 7px rgba(0, 0, 0, 0.2);
}

JavaScript

$(document).ready(function() {
  $('.tooltipTarget').click(function() {
    var title = $(this).data('tooltip');
    if (!$('p.tooltip').hasClass('active')) {
      $('<p class="tooltip active"></p>')
        .text(title)
        .appendTo($(this));

      $('.tooltip').addClass('test');
      $(document).on('click', function(e) {
        if (e.target != $('.tooltipTarget')[0]) {
          $('.tooltipTarget').trigger('click');
        }
      });
    } else {
      $(document).off('click');
      $('p.tooltip.active').fadeOut(250, function() {
        $(this).remove();
      });
    }
  });
});