Javascript - How can we show popup-balloon with code?

Question

if we have this code

<form>
    <input required oninvalid="this.setCustomValidity('error messege')" />
    <input type="submit">
</form>

when we click the submit button, the balloon is shown that contains error messege text...

now if we want to trigger this balloon to show what can we do ? for example we have this HTML code :

<input id="myTextBox" >
<input type="button" onclick="showBalloon()" >

<script>
    function showBalloon(){
        var elem = document.getElementById('myTextBox');
        elem.setCustomValidity('error messege');


        // my problem is HERE !!!
        elem.whichFunctionShouldICallOrWhatToDo(); // this shows balloon of myTextBox
    }
</script>

Answer 1

I think you've got the main functionality down, you just need an HTML element, and to modify the style to show or hide.

<div id='myTextBox' style="display: none;"></div> 
// i'd set it in your javascript, but you get the idea

elem.innerHTML = 'error message';
elem.style.display = 'visible'; //show