CodeMirror Playground

by laomao800

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/mode/javascript/javascript.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="editor"></div>
<br />
<button id="add" class="btn btn-default">Add tooltip to 'return' statement</button>
<button id="remove" class="btn btn-default">Remove tooltip</button>

CSS

body, html {
    padding: 15px;
}

#editor {
    border: 1px solid #DDD
}

.marked-text {
    background: red;
}

JavaScript

var cm = CodeMirror(document.getElementById("editor"), {
    value: "function myScript() {\n    return 100;\n}",
    mode: "javascript",
    indentUnit: 4,
    lineNumbers: true
});

var textMarker;

$('#add').click(function() {
    textMarker = cm.markText({
        line: 1,
        ch: 4
    }, {
        line: 1,
        ch: 10
    }, {
        className: 'marked-text'
    });
    
    $('.marked-text').tooltip({
        title: 'This is a return statement',
        container: 'body',
        delay: { "show": 500, "hide": 100 },
        animation: false
    });
});

$('#remove').click(function() {
    if (textMarker) {
        textMarker.clear();
    }
});