JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="feld1" id="feld2">
<div class="sign_achtung"><input type="text" name="feld2" id="feld2"></div>
<input type="text" name="feld3" id="feld3">

CSS

.sign_achtung {
    position:relative;
}

.sign_achtung::after {
	content: "!";
	background-color:#ff0000;
	padding: 5px;
	font-size: 10pt;
	font-weight: bold;
	color:#ffffff;
	position:relative;
	top: -1px;
	left: 8px;
	width: 10px;
	border-radius: 15px; 
}

.sign_achtung:hover::after .sign_achtung::before {
    background-color:0000ff;
}

.sign_achtung::before {
   	content: "Hier steht Text";
	background-color:#00ff00;
	padding: 5px;
	font-size: 10pt;
	font-weight: bold;
	color:#ffffff;
	position:absolute;
	top: -1px;
	left: 170px;
	border-radius: 15px; 
    
}