JSFiddle - React, Tailwind, and code Playground

by gnossienne

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<div style="height: 100px; width: 200px; background-color: red">
    <p>Test</p>
</div>
<div class="highlightable" style="margin-right: 20px; border: 2px solid orange; "><span hl_id="0">
 
  <p hl_id="1">
    Editor’s Note:
    This post is the third in <highlight style="background-color: rgb(255, 255, 0); " high_anno_id="8">a series from Next Generation Learning Challenges (NGLC). Each post highl</highlight>ights a distinguishing design chara<highlight style="background-color: rgb(255, 255, 0); " high_anno_id="5" class="has_annotation">cteristic o</highlight>f NGLC’s recently funded Breakthrough Postsecondary Models, as described in their
   <a href="http://net.educause.edu/ir/library/pdf/NG1233.pdf" hl_id="2">
     profiles
   </a>
    . This po<highlight style="background-color: rgb(255, 255, 0); " high_anno_id="6" class="has_annotation">st originally app</highlight>eared on the NGLC blog at
   <a href="http://nextgenlearning.org/blog" hl_id="3">
     http://nextgenlearning.org/<highlight style="background-color: rgb(255, 255, 0); " high_anno_id="7">blog
   </highlight></a>
  </p>
</span>

</div>
<div class="option_menu" hidden="true" style="display: block; ">
    <button id="annotation_edit" class="btn btn-inverse disabled" style="opacity: 1; height: 25px; padding: 1px 6px; " annotation="10" data-original-title=""><i class="icon icon-white icon-edit"></i>

    </button>
    <div class="highlight_menu_edit" style="display: none; ">
        <div id="highlight_edit_header">
            <div id="edit_menu_link_1" class="option_menu_text_container"> <span class="option_menu_text" id="add"><i class="icon icon-pencil"></i> Add Annotation</span>

            </div>
            <div id="edit_menu_link_2" class="option_menu_text_container"> <span class="option_menu_text" id="remove"><i class="icon...

CSS

#annotation_edit {
    opacity: 1;
    height: 25px;
    padding: 1px 6px;
    cursor: pointer;
}

div.highlight-modal-header {
    margin: 0px;
    padding: 0px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: move;
}
div.highlight-modal-footer {
    margin: 0px;
    padding: 8px 15px;
    height: 25px;
}
div.highlight-modal-body {
	padding: 5px;
    padding-right: 15px;
    padding-left: 15px;
}

#annotation_close_but {
	margin-left: 5px;
}

#annotation_panel {
    width: 280px;
    border: 1px solid gray;
    z-index: 9001;
}

#date_info_container {
    font-family: inherit;
    font-size: 75%;
    height: 20px;
}
#text_area {
    resize:none;
    margin-top: 5px;
    min-height: 50px;
    width: 94%;
}

highlight.has_annotation {
    cursor : pointer;
    text-shadow: -5px 5px 10px #000;
    opacity: 0.7;
}
div.option_menu {
    z-index : 9000;
}

div.color
{
    float:left;
    width: 20px;
    height: 20px;
    margin: 2px;
    border: 1px solid gray;
    border-radius: 4px;
}

div.color:hover
{
    box-shadow: -1px -1px 2px #888888;
    cursor: pointer;
}

div.selected_color {
	box-shadow: -1px -1px 2px black;
}

#color_palette {
    width: 280px;
    border: 1px solid gray;
    z-index: 9001;
}

div.highlight-modal-header {
    margin: 0px;
    padding: 0px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: move;
}

div.highlight-modal-footer {
    margin: 0px;
    padding: 8px 15px;
    height: 25px;
}

#colors
{
    overflow: overlay; 
}

img#palette_but
{
    margin-right: -35px;
    margin-top: 30px;
    border: 1px solid lightgray;
    border-radius: 5px;
    position: fixed;
    left: 97%;
    #top: 175px;
    cursor: pointer;
    z-index: 1001;
    width:25px;
}

img#palette_but.unchecked:hover
{
    box-shadow: -1px -1px 2px #888;
}

img#palette_but.checked
{
    box-shadow: -1px -1px 2px black;
}

img#palette_but.unchecked
{
    box-shadow: 1px 1px 2px black;
}

img#activate_highlight.unchecked:hover
{
    box-shadow: -1px...

JavaScript

$("highlight").each(function () {
    $(this).tooltip({
        html: true,
        trigger: 'hover',
        placement: 'top',
        title: '<table id="table-anno-tooltip"> \
                    <tr id="row-anno-tooltip"> \
                        <td id="col-anno-tooltip-left"> \
                                <i class="icon icon-white icon-edit"></i> \
                        </td> \
                        <td id="col-anno-tooltip-right"> \
                            <span>' + $(this).html() +'</span> \
                        </td> \
                    </tr> \
                </table>',
        delay: {
            show: 200,
            hide: 150000
        }
    });
});
/*
var title = $('#highlight_edit_header').html();
var content = $('#color_palette_edit').html();

$('#annotation_edit').popover({
    placement: 'right',
    title: title,
    content: content,
    html: true,
    trigger: 'click',
    animation: true,
    template: '<div class="popover" style="width: 130px;"> \
    <div class="arrow"></div> \
    <div class="popover-inner"> \
         <h3 class="popover-title" style="padding:4px 4px;"></h3> \
<div class="popover-content" style="padding:4px 10px;"> \
            <p></p> \
        </div> \
    </div> \
</div>'
}).popover('show'); */