JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input-wrapper">
    <input type="text" class="popover-trigger">
</div>

<div class="popover">
    <p>
      Content to be showed!
    </p>
</div>

CSS

.input-wrapper {
  padding:50px;
}
.popover {
  position: absolute;
  background: blue;
  color: #FFF;
  top: 50%;
  left: 20%;
  width:auto;
  height: auto;
  padding: 50px;
  display: none;
}
.triggered {
  display: block;
}

JavaScript

$(document).ready( function(){

		/*
     * Popbox plugin
     */

     $.fn.adPopbox = function(target){      
          return this.each( function() {
              var enabler = $(this)

                  function focus() {               
                     return enabler.focus( function(){                           
                                 target.addClass('triggered');                                                           
                            });
                  }

                  function blur() {                     
                     return enabler.blur( function(){                          
                                target.removeClass('triggered');                         
                            });
                  }   

                  function popbox() {
                     return target.click( function(){                      
                                target.addClass('triggered');       
                            });
                  }

              focus();
              blur();
              popbox();

          });         
      }
    
    
    /*
     * Invoke Popbox plugin
     */
     
		$(".popover-trigger").adPopbox($('.popover'));
      
 });