I am looking to implement a feature where a floating text message appears when the user clicks on certain HTML elements. Here is the code snippet:
function showAlert(el, e){
var y = e.pageY;
var x = e.pageX;
savedState = classes[classes.length - 2];
message = $("#popup");
$(message).css('display', 'block');
$(message).css('top', y-80).css('left', x);
$( "<p>\""+el.textContent+"\"</p>").appendTo(message);
}
This functionality is attached to elements like this:
$(span).on("click tap", function(event){
var element = this;
showAlert(element, event);
}).mouseleave(function(){
$("#popup").css('display', 'none');
$("#popup").children().remove();
});
The element to be clicked is represented by 'span' and the popup message has the ID "#popup". It should appear with the following CSS properties:
var popupElement= $("<div id='popup'></div>");
var styles = {
"display" : "none",
"position":"absolute",
"background-color":"#fff",
"border":"1px solid #000",
"padding":"5px",
"max-width":"200px",
"color":"black",
"font-size":"10px",
}
$(popupElement).css( styles );
$(popupElement).appendTo($("body"))
While this code works well in most browsers, there are issues in Chrome and Opera where the message does not show up. If I remove the 'display: none' property on mouse leave, a small white square appears but with no text inside. This might be related to the 'display' property manipulation, but I'm unsure. Is there a potential compatibility problem that I have overlooked?