The flickering is caused by the fact that, as soon as you display the cloned item, you hover out of the original item. Then the clone disappears, and you've hovered in again.
You can fix this by changing your code so that you mouseenter
the original element but mouseleave
the clone:
$(document).ready(function () {
$("div.hoverWrapper").on('mouseenter', function () {
console.log('enter');
var hoveredItem = $(this);
var position = hoveredItem.offset().top - $('#mobileWrapper').offset().top - hoveredItem.height() / 2;
var cloneItem = $(this)
.clone()
.addClass('previewActive')
.css('top', position)
.css('left', '-34px')
.on('mouseleave', function () {
console.log('leave');
$(this).fadeOut(300, function () {
$(this).remove();
});
$(this).remove();
});
$('#mobileWrapper').find('.previewActive').remove(); // remove other boxes
hoveredItem.before(cloneItem);
});
});
http://jsbin.com/oJeDUmU/16/edit