Untitled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="rangy-master/external/log4javascript.js"></script>
<script type="text/javascript" src="rangy-master/src/core/core.js"></script>
<script type="text/javascript" src="rangy-master/src/core/dom.js"></script>
<script type="text/javascript" src="rangy-master/src/core/domrange.js"></script>
<script type="text/javascript" src="rangy-master/src/core/wrappedrange.js"></script>
<script type="text/javascript" src="rangy-master/src/core/wrappedselection.js"></script>
<script type="text/javascript" src="rangy-master/src/modules/rangy-classapplier.js"></script>

<script type="text/javascript">

    var MyHighlight;

    rangy.addInitListener(function(rangy) {
        MyHighlight = rangy.createClassApplier("highlight", true);
    });

    $( document ).ready(function() {


            $(".boxes").mousedown(function() {
                    MyHighlight.toggleSelection();
                    document.getElementById('tooltip').style.display = 'none';

            });

            $("#actual_verse").mouseup(function() {


                        var ele = document.getElementById('tooltip');
                        ele.style.display = 'block';


      });


    });


</script>
<style>

        /* Tool Kit */

    #tooltip {
        position:absolute;
        display:none;
        border:grey solid 1px;
        background: #373737;
        padding: 5px;
        border-radius: 3px;
    }
    #cal1{
        position:absolute;
        height:0px;
        width:0px;
        top:100px;
        left:100px;
        overflow:none;
        z-index:-100;
    }
    #cal2{
        position:absolute;
        height:0px;
        width:0px;
        top:0;
        left:0;
        overflow:none;
        z-index:-100;
    }

    .boxes {
      width: 15px;
      height: 15px;
      cursor: pointer;
      display: inline-block;
      margin-right: 2px;
      position: relative;
      top: 3px;
    }

    #blue_box {
      background: #AAF6FF;
    }

    #green_box {
      background: #D6FFAA;
    }

    #orange_box {
      background: #FFBF98;
    }

    #purple_box {
      background: #D7D5FC;
    }

    #red_box {
      background: #FF9B9F;
    }

    #yellow_box {
      background: #FFF8AA;
    }

        /* Tool Kit */

    #tooltip {
        position:absolute;
        display:none;
        border:grey solid 1px;
        background: #373737;
        padding: 5px;
        border-radius: 3px;
    }
    #cal1{
        position:absolute;
        height:0px;
        width:0px;
        top:100px;
        left:100px;
        overflow:none;
        z-index:-100;
    }
    #cal2{
        position:absolute;
        height:0px;
        width:0px;
        top:0;
        left:0;
        overflow:none;
        z-index:-100;
    }

    .boxes {
      width: 15px;
      height: 15px;
      cursor: pointer;
      display: inline-block;
      margin-right: 2px;
      position: relative;
      top: 3px;
    }

    #blue_box {
      background: #AAF6FF;
    }

    #green_box {
      background: #D6FFAA;
    }

    #orange_box {
      background: #FFBF98;
    }

    #purple_box {
      background: #D7D5FC;
    }

    #red_box {
      background: #FF9B9F;
    }

    #yellow_box {
      background: #FFF8AA;
    }


    *.highlight {
        font-weight: bold;
        background-color:#ff0000;
    }


</style>
</head>
<body>
<span id='actual_verse'> Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here Hello There Good Day Sam Was Here </span>
<div id='cal1'>&nbsp;</div>
<div id='cal2'>&nbsp;</div>
<div id='tooltip'> <div id='blue_box' class='boxes' title='Blue'></div> <div id='green_box' class='boxes' title='Green'></div> <div id='orange_box' class='boxes' title='Orange'></div> <div id='purple_box' class='boxes' title='Purple'></div> <div id='red_box' class='boxes' title='Red'></div> </div> <br> <br>
</body>
</html>