JSFiddle - React, Tailwind, and code Playground

HTML

<div class="center">
<div>Text here 1 </div>
<a href="#" id="help-1"  class="help">?</a>			
        		 <div id="txthelp-1" class="hidden">
            		<div class="helpContent">
             			Help text1
           			</div>
         		</div>

<div>Text here 2</div>
<a href="#" id="help-2"  class="help">?</a>			
        		 <div id="txthelp-2" class="hidden">
            		<div class="helpContent">
             			Help text2
           			</div>
         		</div>
    		</div>

CSS

.ui-widget {
            border: 1px solid black;

        }

        .ui-tooltip, .arrow:after {
            background: white;
            border: 1px solid white;
        }
        .ui-tooltip {
            padding: 10px 20px;
            color: black;
            border-radius: 2px;
            font: bold 14px "Helvetica Neue", Sans-Serif;
            text-transform: uppercase;
            box-shadow: 0 0 1px black;
            border: 1px solid white !important;
        }
        .arrow {
            width: 70px;
            height: 16px;
            overflow: hidden;
            position: absolute;
            left: 50%;
            margin-left: -35px;
            bottom: -17px;
        }
        .arrow.top {
            top: -17px;
            bottom: auto;
        }
        .arrow.left {
           left: 20%;
        }
        .arrow:after {
            content: "";
            position: absolute;
            left: 20px;
            top: -20px;
            width: 25px;
            height: 25px;
            box-shadow: 0 0 1px black;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
        .arrow.top:after {
            bottom: -20px;
            top: auto;
        }
        .hidden {
            visibility: hidden;
        }

        .center {
          /*   float:left;*/
            margin: 50px;
        }
        a {
          /*  float:left;*/
        }

JavaScript

$(function() {
	$( ".help" ).tooltip({
		content: function() {
			var text= $(this).attr('id');
			return $( "#txt"+text).html();
		},
		items: '.help',
		position: {
			my: "center bottom-20",
			at: "center  top",					
			using: function( position, feedback ) { 
				$(this).css( position );  
				$( "<div>" )
				.addClass( "arrow" )
				.addClass( feedback.vertical )
				.addClass( feedback.horizontal )
				.appendTo( this );
				}
		}
	})
		.off( "mouseover" )
		.on( "click", function(){    
			if(!$(this).hasClass('opened')) {
				$(this).tooltip( 'open' );							 
				$(this).addClass('opened');
				$(this).removeClass('closed');
				$(this).text('X');
			}
			else {
				 $(this).removeClass('opened');
				 $(this).addClass('closed');
				 $(this).text('?');
				 $(this).tooltip( 'close' );
			}             
			$( this ).unbind( "mouseleave" );
			return false;	
		 });
		 
 $( "body" ).on( "click", function(){
    $( ".help" ).each(function (i) {  
   		if($(this).hasClass('opened')) {
				$( this ).tooltip( "close" ); 
				$(this).removeClass('opened');
				 $(this).addClass('closed');
				 $(this).text('?');				
			}
   });
   return false;
 });
});