Tooltip #2

tooltip stay fixed on mouseenter, without timer.

by Trina Lu

HTML

<div class="block" data-content="block one mask">
    one
</div>
<div class="block" data-content="block two mask">
    two
</div>
<div class="mask">
</div>

CSS

.block {
    width: 200px;
    height: 150px;
    background: #cddc39;
    margin: 5px;
}

.block:hover {
    background: #8BC34A;
}

.mask {
    position: fixed;
    opacity: .8;
    display: none;
    width: 300px;
    height: 200px;
    background: #546167;
    z-index: 10000;
}

JavaScript

var block = $('.block');
var mask = $('.mask');
block.on('mouseenter',showMask);
block.on('mouseleave', hideMask);

function hideMask() {
    mask.hide();
}

function showMask(e) {
    var block = e.target.getBoundingClientRect();
    var vw = window.innerWidth,
        vh = window.innerHeight;
    var $parent = $(e.target); 
    mask.css({
        left: block.right,
        top: block.top,
    }).text($parent.attr('data-content'))
    .stop(true)
    .appendTo($parent) //this does the magic here
    .show(400);
}