Javascript 如何让tooltipster在鼠标悬停时触发并在ajax函数中使用选定的文本？

我正在使用此代码在单击时将跨距中的文本翻译显示为工具提示：

$(document).ready(function () {
    $('.word').tooltipster({
        trigger: 'click',
        touchDevices: true,
        content: 'Loading...',
        functionBefore: function (origin, continueTooltip) {

        continueTooltip();

        if (origin.data('ajax') !== 'cached') {
            $.ajax({
            type: 'GET',
            url: 'translate.php?word=' + $(this).text(),
            success: function (data) {
                origin.tooltipster('content', data).data('ajax', 'cached');
            }
            });
        }
        }
    });
    });

我还希望在选择文本时显示（触发）工具提示，并将所选文本作为url参数发送，如下所示：

translate.php？word={selected text}

。即使文本在单独的跨中、跨中的部分文本、不在跨中，也需要这样做；基本上是页面上选择的任何文本

我找到了下面的代码（），但我不知道如何将其集成到我已有的代码中：

$('div').mouseup(function() {
    alert(getSelectedText());
});

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

以下是我的html的外观：

    <div class="container">
15, 16. (<span class="word">a</span>) 
<span class="word">Paano</span> 
<span class="word">napaibig</span> 
<span class="word">ni</span> 
<span class="word">Esther</span> 
<span class="word">ang</span> 
<span class="word">hari</span>? (
<span class="word">b</span>) 
<span class="word">Bakit</span> 
<span class="word">maaaring</span> 
<span class="word">naging</span> 
<span class="word">hamon</span> 
<span class="word">kay</span> 
<span class="word">Esther</span> 
<span class="word">ang</span> 
<span class="word">mga</span> 
<span class="word">pagbabago</span> 
<span class="word">sa</span> 
<span class="word">buhay</span> 
<span class="word">niya</span>?<br>
15 
<span class="word">Nang</span> 
<span class="word">panahon</span> 
<span class="word">na</span> 
<span class="word">para</span> 
<span class="word">iharap</span> 
<span class="word">si</span> 
<span class="word">Esther</span> 
<span class="word">sa</span> 
<span class="word">hari</span>
...

15, 16. （a）
帕阿诺
纳帕比格
镍
以斯帖
昂
哈里(
（b）
巴基特
马阿林
唠叨
哈蒙
凯
以斯帖
昂
mga
帕格巴戈
sa
布希
尼雅？

15
楠
巴纳洪
na
对位
伊哈拉普
硅
以斯帖
sa
哈里
...

尝试从ajax调用调用

getSelectedText（）

。但在

mouseup

上执行此操作。这将检查是否有任何选定的文本从函数中返回，然后进行ajax调用（如果有）

$('div').mouseup(function() {
    var selectedText = getSelectedText();
    if(selectedText) {
        $.ajax({
            type: 'GET',
            url: 'translate.php?word=' + encodeURI(selectedText),
            success: function (data) {
                origin.tooltipster('content', data).data('ajax', 'cached');
            }
        });
    }
});

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

---

在我看来，使用这样一个巨大的库来获取您想要做的事情不是一个好主意，而您可以在没有插件的情况下轻松完成它，而且您试图通过插件来完成的事情似乎是不可能的，因为您的操作既不是插件支持的

单击
，也不是
悬停

这是一个没有插件的演示

var cache = []; //defining the cache

$('.word').mouseup(function(e) {
    var selectedText = getSelectedText();
    if (selectedText.length > 0) { //if any text was selected

        //position and show the tooltip
        $('.tooltip').css({
            left: e.pageX,
            top: e.pageY
        }).addClass('show').text('loading...');

        if (checkCache(cache, selectedText) === '') { //check the cache for the translation

            //for the sake of the demo we'll simulate the ajax call, remove this part in your actual code
            setTimeout(function() {
                cache.push({
                    value: selectedText,
                    translation: 'translation of ' + selectedText
                });
                $('.tooltip').text('translation of ' + selectedText);
            }, Math.floor(Math.random() * (2000 - 300 + 1) + 300));
            return;
            //end of the simulation

            //if didn't find the translation call the ajax
            $.ajax({
                type: 'GET',
                url: 'translate.php?word=' + selectedText,
                success: function(data) {

                    //cache the translated text
                    cache.push({
                        value: selectedText,
                        translation: data
                    });

                    $('.tooltip').text(data); //show the translation
                }
            });
        } else {

            //if it was cached, load from the cache
            $('.tooltip').text(checkCache(cache, selectedText));
        }
    }
});

//close the tooltip if clicked somewhere on the page other than the text or the tooltip
$(document).on('click', function(e) {
    if ($('.word,.tooltip').is(e.target) || $('.word,.tooltip').has(e.target).length > 0) return false;
    $('.tooltip').removeClass('show');
});

//get the selected text
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

//check the cache for translation
function checkCache(cache, value) {
    var translation = '';
    $.each(cache, function(i, obj) {
        if (obj.value == value) {
            translation = obj.translation;
            return false;
        }
    });
    return translation;
}

谢谢我需要它只做这一点，如果文本已被选中。试试看。这将使ajax调用仅在
getSelectedText（）
返回任何内容的情况下进行。它似乎仅在仅选择一个span的文本时有效，但在选择多个span的文本时无效。请重试。我已经编辑了以上内容，将所选文本编码为URI。如果不使用tooltipster插件，可以吗？我的意思是，为什么你需要用这么大的插件，用不到kb的代码做一些非常容易的事情呢？