Mayo tooltip

Testing out the tooltip for the CNX.

by Marventus

HTML

<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' />
<div class="tool-wrap">
    <div id="mceTooltip" class="tooltip">
        <div class="tool-ui">
            <p class="comment-insert main-btn" title="Insert a comment"></p>
            <p class="comment-delete main-btn" title="Delete this comment"></p>
            <p class="comment-edit main-btn" title="Edit this comment"></p>
            <p class="comment-history main-btn" title="View comment history"></p>
            <p class="comment-sett main-btn" title="Configure comment settings"></p>
            <p class="comment-close main-btn" title="Close this tooltip"></p>
            <p class="comment-cancel comm-edit" title="Cancel changes"></p>
            <p class="comment-save comm-edit" title="Save changes"></p>
        </div>
        <div class="tool-user">
            <p class="username">Marventus</p>
            <p class="said">said:</p>
        </div>
        <div class="tool-cont">
            <p class="comment">Some comment.</p>
        </div>
        <div class="tool-info">
            <p class="tool-date"></p>
            <p title="This is only getting the current time for now." class="tool-time"></p>
        </div>
        <div class="tool-arrow"></div>
    </div>
</div>

CSS

}.tool-wrap {
    left: 20px;
    margin-top: -10px;
    padding: 0 10px 31px;
    position: absolute;
    top: 20px;
    z-index: 9999;
}
.tool-wrap.active {
    margin-top: -20px;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease, margin 0.2s ease;
    -moz-transition: opacity 0.2s ease, margin 0.2s ease;
    -ms-transition: opacity 0.2s ease, margin 0.2s ease;
    -o-transition: opacity 0.2s ease, margin 0.2s ease;
    transition: opacity 0.2s ease, margin 0.2s ease;
}
.tool-wrap.out {
    margin-top: -40px!important;
    opacity: 0;
}
.tooltip, .tool-wrap .tool-arrow:after {
    border: 3px solid white;
}
.tooltip {
    background: #aaa;
    border-radius: 8px;
    -khtml-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.75), inset 0 0 20px rgba(0, 0, 0, 0.1);
    box-sizing: content-box!important;
    -moz-box-sizing: content-box!important;
    -ms-box-sizing: content-box!important;
    -webkit-box-sizing: content-box!important;
    font-stretch: condensed;
    z-index: 9999;
}
.tooltip p {
    margin: 0;
}
.tooltip .tool-ui, .tooltip .tool-info {
    background: rgba(255, 255, 2255, 0.35);
    position: relative;
    width:100%;
}
.tooltip .tool-info {
    height: 20px;
}
.tooltip .tool-ui {
    border: 1px solid #eee;
    height: 25px;
}
.tooltip .tool-ui p {
    background: url("http://testtiny.joshlobe.com/img/comments-sprite.png") no-repeat;
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 22px;
    margin: 3px 0 0 5px;
    opacity:...

JavaScript

function mceCommentsDel(el) {
    var ed = tinyMCE.activeEditor,
        t = ".tool-cont",
        tC = t + " p",
        tmp = document.createElement("div"),
        txt;
    if (el !== ed.plugins.comments.currCom) {

        txt = el.innerHTML;
        tmp.appendChild(el);
        tmp.removeChild(el);
        ed.selection.setContent(txt);
        $(tC).text("");
        ed.execCommand("mceCommentsToolClose");
    } else {
        $(".tool-wrap").addClass("marked");
        txt = el.html();
        el.replaceWith(txt);
        $(t).css("opacity", "0");
        if ($("textarea" + t).length) {
            $(t).attr("value", "");
            ed.execCommand("mceCommentsToolSave");
        } else {
            ed.execCommand("mceCommentsToolMsgs", false, {
                mode: "success",
                txt: "Your comment was deleted!"
            });
            setTimeout(function () {
                $(tC).text("");
                $(t).css("opacity", "1");
                ed.execCommand("mceCommentsToolClose");
            }, 2000);
        }
    }
}

function mceCommentsToolBinder(elems) {
    var cm = ".comment-",
        cl = "click",
        objs = {
            "cancel": {
                evt: cl,
                evtH: function () {
                    ed.execCommand("mceCommentsToolCancel");
                }
            },
                "close": {
                evt: cl,
                evtH: function () {
                    ed.execCommand("mceCommentsToolCloseClick");
                }
            },
                "delete": {
                evt: cl,
                evtH: function () {
                    var cCom = ed.plugins.comments.currCom;
                    ed.execCommand("mceCommentsDel", false, cCom);
                }
            },
                "edit": {
                evt: cl,
                evtH: function () {
                    ed.execCommand("mceCommentsToolEdit");
                }
            },
                "save": {
    ...