JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<div id='entity_class' class="entity_types">
  <button class="btn" style="color:#F7DC6F">Class 1</button>
  <button class="btn" style="color:#EB984E">Class 2</button>
  <button class="btn" style="color:#82E0AA">Class3</button>
</div>

<div class="article" style="overflow-x:auto;">
  What is missing from this statement, and likely to be asked by lawmakers, is why it took a newspaper to discover this breach of Facebook's systems. And, once Facebook knew, why it didn't notify the public and regulators immediately - instead of doing
  everything it could to block the story.
</div>

<!-- <div class="article2" style="overflow-x:auto;">
 fillers fillers fillers fillers fillers fillers fillers fillers fillers fillers fillers fillers fillers fillers fillers fillers 
</div> -->

CSS

.entity_types { 
  text-align:center;
  display: none;
  width: 250px;
  background-color: #008000;
  border: 3px solid #666;
  padding: 12px 12px 12px 12px;
  border-radius: 25px 25px 25px 25px;
}

JavaScript

jQuery(document).ready(function($) {

	function getRightClick(e) {
		var rightclick;
		if (!e) var e = window.event;
		if (e.which) rightclick = (e.which == 3);
		else if (e.button) rightclick = (e.button == 2);
			return rightclick; // true or false
	}

	function getSelectionText() {
	    var text = "";
	    if (window.getSelection) {
	        text = window.getSelection().toString();
	    } else if (document.selection && document.selection.type != "Control") {
	        text = document.selection.createRange().text;
	    }
	    return text;
	}
    
  $('.article').mousedown(function(event) {
    $('body').attr('mouse-top',event.clientY+window.pageYOffset);
    $('body').attr('mouse-left',event.clientX);
    if(!getRightClick(event) && getSelectionText().length > 0) {
      $('.entity_types').hide();
      document.getSelection().removeAllRanges();
    }
  });
  
  $('.article').mouseup(function(event) {
    var st = getSelectionText();
    if(st.length > 3 && !getRightClick(event)) {
      $('.entity_types').css({
        display: 'block',
        position: 'absolute',
        left: (event.pageX+10) + 'px',
        top: (event.pageY+15) + 'px'
      });  
    }
  });
});