JSFiddle - React, Tailwind, and code Playground

by lonewolfs

HTML

<!--<div class="comment">I am fine</div>-->
<div class="xlink">Clicks I do</div>

CSS

div{border:thin solid #000;}
.hovercard{padding:5px;}
.comment{margin:auto;width:100px;height:100px;position:relative;}
.xlink{position:absolute;top:150px;left:200px;cursor:pointer;}

JavaScript

function hovercard(position,htmltext)
{
    $('body').append(position.top+':'+position.left+'<br/>');
    $('body').append(htmltext.length+'<br/>');
    $('body').append(this.length+'<br/>');
    var html = '';
    var top = position.top - 50;
    var left = position.left - 32;
    html = '<div class="hovercard" style="position:absolute;top:'+ top +'px;left:'+ left +'px;">'+ htmltext +'</div>';
    return html;
}

$('.xlink').mouseenter(function(){
    $('body').append($(this).width()+'<br/>');
    $(this).after(hovercard($(this).position(),'This is hovercards'));
}).mouseout(function(){
    $('.hovercard').remove(); 
});

$('.xlink').live('click',function(){
    var x = $(this).width(); 
    var y = $(this).height();
    $('body').append(x+':'+y);
});