JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<input id="t1" value="hello hello" />
</div>

CSS

#wrapper {position: relative; }
.m {border: 1px solid gray; }

JavaScript

$("#t1").on("contextmenu", function(e) {
    var $p = $("<div class='m'><input id='a1' type='button' class='opt' value='option 1' /><br /><input id='a2' type='button' class='opt' value='option 2' /><br /><input id='a3' type='button' class='opt' value='option 3' /></div>");
    $p.css({"position": "absolute", "left": "100px", "top": "32px"});
    $("#wrapper").append($p);
    $("#wrapper").find("#a1").focus();
    e.preventDefault();
});

$("html, body").on("click", function() {
    $(".m").hide().remove();
});

$("#wrapper").on("click", "#a1, #a2, #a3", function() {
    alert(getSelection(document.getElementById("t1")));
});

function getSelection(elm) {
    var start = elm.selectionStart;
    var end = elm.selectionEnd;
    return elm.value.substring(start, end);
}