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>

You mean a tooltip? If you want to a custom popup, you have to create a div and set it to visibe, put the text in it and display it. As it stands now, the question is too broad, there are multiple questions being asked here. Give it a real attempt and ask a question once you've tried something and it didn't work. — Juan Mendes, Jul 25 '14 at 23:13

score 0 · Answer 1 · answered Jul 25 '14 at 23:42

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

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

1 Answers1