JSFiddle - React, Tailwind, and code Playground

by MarkKramer

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css">
<script src="http://dl.dropbox.com/u/41629841/jquery.timer.js"></script>
<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

// 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();
    //start hide timer
    $(this).oneTime(2000, "hide", function() {
        $("#edit-this").hide();
    });
});

//stop hide timer on edit this mouseover
$('div.#edit-this').mouseover(function(){
    $('span.editable').stopTime("hide");
});

//hide edit this on mouseout
$('div.#edit-this').mouseleave(function(){
    $('#edit-this').hide();
});