How do I alert the content of a DIV without using an alert?

Question

I'm trying to make a program that basically shows the coordinates of a point when someone mouses over it and then makes it disappear when the mouse pointer is off the element. I have tried to do this with alert boxes but there doesn't seem to be a simple way to close them. I've looked around and people have said something about using DIVS but I have no idea where to start. This is for a introductory programming course so PLEASE no Jquery, only pure JavaScript.

     for (i = 0; i < x.length; i++) {
            document.getElementById("point" + i).style.left = x[i] + "px";
        }
        var html;
        html = "";
        for (i = 0; i < x.length; i++) 
        {
            document.getElementById("point" + i).onmouseover = onmouseover;
        }
    }

};
function onmouseover() {
    var x;
    x = window.alert("X: " + this.style.left + " ," + "Y: " + this.style.top);
    this.onmouseover = function () { setHTML(element, x) };
}

may be you can create tooltips which is displayed on mouse over the element and hides when off the element..! — Sudhir Bastakoti, May 06 '15 at 04:23

score 1 · Accepted Answer · edited May 23 '17 at 11:51

Place a div at the end of the page with a specific ID and use CSS to position it absolutely (you'll want to adjust top and left accordingly)...

<div id="alert" style="position:absolute; top: 50px; left: 50px; display: none;"></div>

...then in your Javascript, instead of calling an alert, you can show and hide your div.

document.getElementById("alert").style.display = "block"; // display the div

document.getElementById("alert").style.display = "none"; // hide the div

You could also base the position off of cursor position instead of having it be fixed if you want. How to get mouse pointer position using javascript for internet explorer?

How do I alert the content of a DIV without using an alert?

1 Answers1