I'm working with an HTML element that generates a popup. My goal is to display an error message in my form when the user inputs invalid data using this popup. However, I'm facing an issue where the popup appears on top of the form input, and there's a small arrow at the bottom pointing towards the form.
Here is the code snippet:
<div class="popup" onclick="myFunction()">
<span class="popuptext" id="myPopup">{{ error }}</span>
</div>
In JavaScript:
function myFunction() {
let popupTxt = document.getElementById("myPopup");
popupTxt.classList.add("hide");
}
For 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 ;}
}
I am seeking advice on how to relocate the small arrow to the left of the popup box so it points at the input field when the popup box is positioned to the right.
The current appearance is as follows: https://i.sstatic.net/QbNVv.png
I prefer the error popup and arrow to be positioned on the right side of the input and pointed towards it since I intend to add another one for hostname input without obstructing any content.