I have this HTML element that creates a popup. I want to use this popup to show an error message in my form when the user enters invalid data. The problem with the popup is that it appears on top of the form input and there is a little arrow at the bottom that is pointing to the form.

HTML-

<div class="popup" onclick="myFunction()">
    <span class="popuptext" id="myPopup">{{ error }}</span>
</div>

JS-

function myFunction() {
  let popupTxt = document.getElementById("myPopup");
  popupTxt.classList.add("hide");
}

CSS-

      /* Popup container - can be anything you want */
      .popup {
        position: relative;
        display: inline-block;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      
      /* The actual popup */
      .popup .popuptext {
        /* visibility: hidden; */
        width: 160px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 8px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -80px;
      }
      
      /* Popup arrow */
      .popup .popuptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
      }
      
      /* Toggle this class - hide and show the popup */
      .popup .hide {
        visibility: hidden;
        -webkit-animation: fadeIn 1s;
        animation: fadeIn 1s;
      }
      
      /* Add animation (fade in the popup) */
      @-webkit-keyframes fadeIn {
        from {opacity: 0;} 
        to {opacity: 1;}
      }
      
      @keyframes fadeIn {
        from {opacity: 0;}
        to {opacity:1 ;}
      }

What I need help with, is finding out how to move the small arrow to the left of the popup box so it's pointing at the input field when the popup box is to the right.

This is what it looks like currently.

I need the error popup and arrow on the right of input and pointing to the input because I will add another for hostname input and don't want anything covered by the popup.