Detect hover on selected text

Question

I am building a WYSIWYG rich text editor.

When the user selects a portion of his/her text, I would like to present a menu in a tooltip. Presenting the menu works fine bu

Answer 1

Try this way:

JS

$(document).ready(function () {
    $(document).on("mouseup", ".conttext", function () {
        var highlight = window.getSelection();
        console.log(highlight);
        var spn = '' + highlight + '';
        var text = $('.conttext').text();
        $('.conttext').html(text.replace(highlight, spn));
    });
    $(document).on("mouseover", ".highlight", function () {
        alert("You hovered on selected tex"); // Your tooltip code goes here
    })
});

CSS:

.highlight {
    color:#888;
    position:relative;/*This will not matter if you inject tooltip using JS*/
    display:inline-block;/*This will not matter if you inject tooltip using JS*/
}

HTML:

Sample text

Demo: http://jsfiddle.net/lotusgodkk/BGKSN/202/