[JS][CSS] setCustomValidity
Guten Morgen, Mittag oder Abend,
ich habe eine Frage bezüglich des Befehls setCustomValidity. Ist es möglich die Ausgabe von dem eben genannten Befehl zu gestalten, wenn ja auch mit CSS?
Meine zweite sowie dritte Frage impliziert die erste Frage, denn ich würde gerne wissen, ob es möglich sei, dass die Ausgabe nicht auf den Bildschirm fixiert ist, sondern auf die Website bzw. das Element. Und meine letzte Frage ist, ob man die Ausgabe vom Element aus neu positionieren kann, sprich nach links/oben/unten/rechts verschieben.
Mit freundlichen Grüßen
Crazy
Der hier verwendete Code
<script src="/js_webseite/jquery.js"></script>
<style>
#sprechblase1{
position: relative;
top:0px;
left:0px;
display:none;
}
#innen{
display:flex;
width:100%;
height:100%;
line-height:20px;
text-align:center;
}
#aus{
margin-right:20px;
position:relative;
top:10px;
left:10px;
width:30px;
height:30px;
border-radius:5%;
background:#fa6405;
display:flex;
}
#sprechblase{
position: relative;
top:0px;
left:0px;
width: 310px;
height: 55px;
padding: 1px;
background: #FFFFFF;
border-radius: 6px;
border: #000000 solid 2px;
box-shadow:3px 3px 5px grey;
}
#sprechblase:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 26px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: -26px;
left: 81px;
}
#sprechblase:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 16px 27px;
border-color: #000000 transparent;
display: block;
width: 0;
z-index: 0;
top: -29px;
left: 80px;
}
</style>
<br><br><br><center><input type="text" id='form-name' placeholder='Name' onmouseout="aus()">
</center>
<div id="sprechblase1">
<div id="sprechblase">
<div id="innen">
<div id="aus"><img src="https://www.experten-beraten.de/imgs/icons/hqc-s-1.png" width="30" height="30">
</div><p>
Bitte füllen sie dieses Feld aus </p></div>
</div>
<script>
$('input').click(function(){
$('#sprechblase1').css('top',event.pageY-20+'px');
$('#sprechblase1').css('left',event.pageX-80+'px');
$('#sprechblase1').css('display','block');
});
function aus(){
$('#sprechblase1').css('display','none');
}
</script>
</div>