Home/ Questions/Q 3843376
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T15:55:45+00:00

I have a calendar, and when the user hovers over a cell, a large-ish

  • 0

I have a calendar, and when the user hovers over a cell, a large-ish info box appears with details for that date. I am having some trouble though making the info box disappear when the user moves away.

I basically want it so that when the mouse cursor moves out of the calendar cell which is hidden by the info box it will disappear. But I’m having trouble with this because mouseenter and mouseleave get messed up by having the info box as the top element.

So I tried to get around this by using “placeholder” divs that are transparent, have the same shape and location as the calendar cell beneath it, and have a z-index of 1000 so they are above the info box. I then apply the mouseenter and mouseleave events to these divs instead.

There’s two problems with this though. One, I have now messed up my HTML semantically. The divs have no purpose but to get around what seems to be a limitation. And secondly, they mess up my jQuery UI selection (I’ve applied it to the calendar cells – a click no longer selects a cell).

Is there a clean way to handle displaying an info box? There will be no user interaction with the info box — it’s just to display information.

EDIT: Here is some code:

<li>
    <div class="day-content">
    </div>
    <div class="day-content-placeholder">
    </div>
</li>

and CSS

li
    { position: absolute; width: 15%; height: 20%; top: ... left: ... }
.day-content
    { position: absolute; width: 100%; height: 100%; }
.day-content-placeholder
    { position: absolute; width: 100%; height: 100%; z-index: 1000; }
.popup
    { position: absolute; width: 300%; height: 300%; left: -150%; top: -150%; z-index: 500; }

and Javascript

var popup;
$('.week-content-placeholder')
    .mouseenter(function()
        {
        popup = $('<div class="popup">'+a_lot_of_text+'</div>').insertAfter(this);
        })
    .mouseleave(function()
        {
        popup.remove();
        });

That’s not the exact code, but you get the idea. This works okay, but like I said, since .week-content-placeholder is above .week-content, the selection capability with jQuery UI doesn’t work properly on .week-content.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could modify your solution with the transparent “placeholder” divs in the following way:

    Have the “placeholder” dive underneath the “calendar cell”, using {zIndex: -1}.

    When you enter a calendar cell, unhide the large “content” div and set {zIndex: 1000} on the “placeholder” div to bring it to the top.

    Have a “mouseout” event on the placeholder div that will hide the “content” div and set {zIndex: -1} for the the “placeholder” cell.

    Rather than create the “placeholder” cells in the HTML, you could create one in the javascript and move it to the postion of each “calendar” cell as you “mouseIn” it. You could also duplicate any “click” events on the “calendar cell” onto this one as well.

    Let me know if this works.

    • 0