文本选择和qtip或此类工具提示

Question

我正在尝试使用window.getSelection()方法实现某些目标。 我想通过一些操作来获得工具提示中的选定文本，例如编辑选定的文本，或删除选定的文本，并向该选择添加一些标记和注释，类似于x-editable 。 在x-editable中，我们无法直接编辑文本。

http://jsfiddle.net/ravimallya/ZXPSY/9/这是我正在使用的小提琴。 我试图通过Annotator来获得想要的东西，但是在IE7或8中无法正常工作。而且很难与asp.net网站集成。

我尝试了可以通过函数调用显示qtip中提到的解决方案吗？ 但它不起作用。 另一个类似的问题， 如何在所选文本旁边显示工具提示？ 没有答案或适当的解决方案。

欢迎使用Bootstrap Popover或带有自定义内容的qTip2或任何此类其他解决方案，或对当前提琴的修正。

Answer 1

我使用jqueryUI对话框找到了自己的解决方案。 所以分享吧。 这可能对其他尝试达到相同目标的人有所帮助。 需要包括jquery和jqueryUI库。 以后使用以下代码和脚本。

<div id="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam eros non odio fringilla, placerat feugiat turpis gravida. Vivamus ac porttitor metus. Aliquam a facilisis erat. Morbi a nisi nibh. Vestibulum volutpat gravida eros. Ut in tortor at magna gravida consectetur eget at dui. Vivamus eget justo eu libero mattis interdum. Morbi iaculis lorem ut felis commodo accumsan. Phasellus a tristique tellus, at lobortis neque. Proin quis tempus est. Morbi dignissim tempor justo at fringilla. Proin sit amet tortor mattis, euismod est eu, volutpat mauris.</p>
</div>

脚本

if (!window.mSelect) {
    mSelect = {};
}
mSelect.Selector = {};
mSelect.Selector.getSelected = function () {
    var txt = '';
    if (window.getSelection) {
        txt = window.getSelection();
    } else if (document.getSelection) {
        txt = document.getSelection();
    } else if (document.selection) {
        txt = document.selection.createRange().text;
    }
    return txt;
};

mSelect.Selector.mouseup = function () {
    var st = mSelect.Selector.getSelected();
    if (st != '') {
        $("#dialog-modal").dialog({
            modal: true,
            title: 'You selected ' + st,
            buttons: {
                "Add": function () {

                }
            }
        });
    } 
    else {
        alert("select some text");
    }
};
$(function () {
    $('#text').bind("mouseup", mSelect.Selector.mouseup);
});

在add功能中，我们可以通过ajax发布选定的值。

但是，如果任何人都有比这更好的解决方案（显示工具提示而不是对话框），请告诉我。