Show tooltip after Hover for 2 seconds

by Nikolay Petrov

HTML

<span id="someelem">Hover me for 2 seconds!</span>

CSS

#someelem
    {
    cursor: pointer;display:block;
    padding:40px;width:600px;height:600px;
    }

.tooltip
    {
    display: block;
    position: absolute;
    background-color: rgb(130, 150, 200);
    padding: 5px;
    }

JavaScript

var tooltipTimeout;

$("#someelem").hover(function()
                    {tooltipTimeout = setTimeout(showTooltip, 2000);}, 
                    hideTooltip);

function showTooltip()
    {
    var tooltip = $("<div id='tooltip' class='tooltip'>I'm the tooltip!</div>");
    tooltip.appendTo($("#someelem"));
    }

function hideTooltip()
    {
    clearTimeout(tooltipTimeout);
    $("#tooltip").fadeOut().remove();
    }