JSFiddle - React, Tailwind, and code Playground

by naryad

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css">
<div id="content"><p>Lorem ipsum dolor sit amet, elitr,  sed <span class="editable" data-id="my_id1">diam nonumy</span>  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam <span class="editable" data-id="my_id2">justo duo dolores</span> voluptua. At vero eos et accusam et et ea rebum.</p></div>

<div id="out"></div>

<div id="edit-this">
    <button>Edit This</button>
</div>

CSS

span.editable {
    font-weight: bold;
    color: steelblue;
    cursor: pointer;
}
#edit-this {
    position: absolute;
    display: none;
}
#out {
    color: blue;
}
#content {
    padding: .5em 4em 0 0;   
}

JavaScript

var timer = null;

// button-ify the edit button
$('#edit-this button').button();

// attach the click handler
$('span.editable').click(function() {
    // example handler
    $('#out').html('Clicked: ' + $(this).attr('data-id'));
});

// attach the mouseover handler
$('span.editable').mouseover(function(e) {
    var $span = $(e.target),
        offset = $span.offset();
    // show the link
    $('#edit-this')
        .css({
            top: offset.top - 16,
            left: offset.left + $span.width() + 3
        })
        .show();
});
$('span.editable').mouseleave(function() {
    if(timer)
        clearTimeout(timer);
    timer = setTimeout(function() {
        $('#edit-this').hide();
        timer = null;
    }, 2000);
});

$('#edit-this').mouseover(function() {
    if(timer)
        clearTimeout(timer);
    timer = null;
    
    var $this = $(this);
    $this.one('mouseleave', function() {
        $this.hide();
    });
});