Chrome/Opera jquery css display not working

Question

I want to show a floating text message whenever the user clicks on certains html elements; the code is

function avviso(el, e){   
    var y = e.pageY;
    var x = e.pageX;
    saved_state = classi[classi.length - 2]; 
    msg = $("#messagge");
    $(msg).css('display', 'block');
    $(msg).css('top', y-80).css('left', x);
    $( "<p>\""+el.textContent+"\"</p>").appendTo(msg);
}

Attached to the elements like this:

$(span).on("click tap", function(event){
      var element = this;
      avviso(element, event);
 }).mouseleave(function(){
      $("#messagge").css('display', 'none');
      $("#messagge").children().remove();
 });

Where span is the element to be clicked and "#messagge" is the id of the text message that should appear, initialized with the following css properties:

    var n= $("<div id='messagge'></div>");
    var styles = {
            "display" : "none",
            "position":"absolute",
            "background-color":"#fff",
            "border":"1px solid #000",
            "padding":"5px",
            "max-width":"200px",
            "color":"black",
            "font-size":"10px",
        }
        $(n).css( styles );
        $(n).appendTo($("body"))

Now, everything works fine in all browsers, with the exceptions of chrome and Opera, where the message does not appear. If I don't change the display property into "none" on mouse leave there is a small white square appearing where I click, but with no text inside. I assumed it has something to do with the .css("display", "block"), but I'm not really sure of it (sorry if the title does not match my problem). Maybe I am missing some portability issue?

Answer 1

I suggest that the problem is this: when you click on the span element the message appears below the mouse pointer, instantly triggering mouseleave event which hides the message. Try to comment out mouseleave event callback to see if that is the problem. Also play with top/left values here:

$(msg).css('top', y-80).css('left', x);

Add or remove some values to x/y to be sure that your div with message does not appear under the cursor.