javascript - Implementing a hover info box - Stack Overflow

admin管理员组

文章数量:1292369

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.

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.

• javascript
• jquery
• hover

Share Improve this question Follow edited Jan 25, 2011 at 19:00 Nick asked Jan 25, 2011 at 18:40 NickNick 5,4401111 gold badges4343 silver badges7171 bronze badges 7

• It might be useful to know what the html of your calendar is to answer this question. – David Thomas Commented Jan 25, 2011 at 18:43
• Well, it's not a very calendar specific question. It's just a div that has a mouseenter event that appends another div next to it. This div has a large width and height, but it now obscures the div below it, blocking its mouseleave event. – Nick Commented Jan 25, 2011 at 18:45
• 1 Nick, Why don't you use CSS "position" to place your info box on the screen such that it doesn't fully obstruct the calendar cell? – Neil Commented Jan 25, 2011 at 18:45
• Yes, I know. But it helps to see what elements you're working with to suggest useful, specific, not-just-a-plugin-gallery answers to your question. – David Thomas Commented Jan 25, 2011 at 18:46
• That's really part of the design though.. The calendar has text in each cell that is too small, so the user moves there mouse over it, and a popup over the cell is big enough to hold the large amount of information. If I move the popup to a different location, it could confuse the user as to what it corresponds to. – Nick Commented Jan 25, 2011 at 18:47

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 2

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.

The trick here is to make the info box a child of the cell:

<div id='box'>
    Normal content
    <div id='inner'>
        This big box obscures everything in the cell!
    </div>
</div>

The inner box is hidden until the hover occurs. Notice how with CSS we can make the box bigger than the cell itself with negative margins.

#box
{
  width:100px;
  height:100px;
  margin:100px;
  border:solid 2px darkblue;
  position:relative;
}
#box #inner
{
  display:none;
  position:absolute;
  background-color:#eeee00;
  top:-10px;
  left:-10px;
  width:120px;
  height:120px;
}

And you can use normal jquery hover because the hover covers box the box and it's child:

$('#box').hover(function(){
    $('#inner').show();
},function(){
    $('#inner').hide();
});

Here's it running:

http://jsfiddle/RbqCT/

You can create the info box dynamically as you do in your code.

Here's 15 different plugins that let you do this with jquery:

http://www.webdesignbooth./15-jquery-plugins-to-create-an-user-friendly-tooltip/

You could track mousemouse and use the offsetLeft + width and offsetTop + height of your hover trigger against the event.pageX and event.pageY to pare.

If you make this work as you described a tiny mouse movement that remains within the calendar cell (which is not even visible) leaves the popup in place, but a slightly larger movement that exits the cell makes the popup disappear.

The user sees only movement within the popup itself — small movement within the popup leaves it in place; large movement makes it go away.

I suggest triggering the disappearance of the popup on exiting the popup div itself. Any movement that remains within the "tip" panel leaves it up. I think that (1) this is better usability and (2) it avoids the whole problem with the obscured calendar cell event handling.

You could do that by adding a .mouseleave() handler to the div when you create it.

本文标签： javascriptImplementing a hover info boxStack Overflow