onMouseOver not working fine with hover

Question

Hi, i'm trying to get a popup window when hovering a div by calling the following function onMouseOver

function PopUp(h) {
    $('#task_' + h).hover(function (evt) {
        var html1 = '<div id="box">';
        html1 += '<h4>Taskbar ' + h + ' ännu en test - fredagstest </h4>';
        //html += '<img src="Pictures/DesertMini.jpg" alt="image"/>';
        html1 += '<p>"Test för task nr: ' + h + ' <br/>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium asperiores repellat."</p>';
        html1 += '</div>';
        $('#test').append(html1).children('#box').hide().fadeIn(100)
        $('#box')
            .css('top', evt.pageY)
            .css('left', evt.pageX + 20)
            .css('z-index', 1000000);
        }, function () {
            // mouse out
            $('#box').remove();
        });
        $('#task_' + h).mousemove(function (evt) {
            $('#box')
                .css('top', evt.pageY)
                .css('left', evt.pageX + 20)
                .css('z-index', 1000000);
        });
    }
}

h is some number I'm sending to the function

<div (some attributes) onMouseOver="PopUp('+someNumber+');">

but the onMouseOver is not working fine with the hover what do i do?

thanks a trillion in advance... Lina

Answer 1

Why not attach the popup function to the div's hover effect? Assuming the div has id "popups".

$('#popups').hover(function(){
    // your task hover
});

Answer 2

Here's a simple example-- see if you notice what you're doing differently

<div id="box">Hover Over Me</div>

$('#box').hover(
  function(evt){
    // code
  }
);

Answer 3

Are you getting a javascript error?

You seem to be missing a semi-colon on the following line as well:

$('#test').append(html1).children('#box').hide().fadeIn(100) 

Here is a hint over extension I use (it's quite basic but works well):

jQuery.fn.ToolTip =
function()
{
    return this.each(function()
    {
        $(this).mouseover(function(e)
        {
            // Grab the title attribute value and assign it to a variable
            var tip = $(this).attr('title');
            // Remove the title attribute to avoid the native tooltip from displaying
            $(this).attr('title', '');
            // Append the tooltip div
            $('body').append('<div id="tooltip_container">' + tip + '</div>');
            // Set the X and Y of the tooltip
            $('#tooltip_container').css('top', e.pageY + 10);
            $('#tooltip_container').css('left', e.pageX + 10);
        }).mousemove(function(e)
        {
            // Make the tooltip move along with the mouse
            $('#tooltip_container').css('top', e.pageY + 10);
            $('#tooltip_container').css('left', e.pageX + 10);
        }).mouseout(function()
        {
            // Put back the title attribute value
            $(this).attr('title', $('#tooltip_container').html());
            // Remove the appended tooltip template
            $('body').children('div#tooltip_container').remove();
        });
    })
};

Then useage is:

<img ID="someImageWithHover" src="someImage.jpg" title="Tip I want to show!" />

$('#someImageWithHover').ToolTip();

Css for the tooltip:

#tooltip_container
{   
    position:absolute;   
    z-index:9999;   
    color: #000000;
    background: #eaf2fa;
    width:240px; 
    padding: 4px 8px;
    margin: 0;
    border: 2px solid #2F4F88;
}

You just need to store whatever html you want to show in the hover tooltip, in the title attribute of the control triggering the hover.

Hope this helps.

Answer 4

use .bind or .live

Answer 5

Thanks for your answers :)

I solved the issue by using jquery cluetip which is much more flexible and more practical. + i added another inner div to the outer one, so the code now looks like this:

<div id="task_" + dynamicNumber> <div onMouseOver="PopUp(" + dynamicNumber + ");">&nbsp;</div> </div>

 function PopUp(h) {
           $('#task_' + h).attr('title', '|id= ' + h + '  hello!');
           $('#task_' + h).cluetip({
               splitTitle: '|',
               showTitle: false,
               positionBy: 'mouse',
               cursor: 'pointer',
               cluezIndex: 500000
           });
       } //end PopUp()