How can I get tooltipster to trigger on mouseup and use selected text in ajax function?

Question

I'm using this code to show a translation of the text in a span as a tooltip on click:

$(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');
            }
            });
        }
        }
    });
    });

I would like to also show (trigger) the tooltip when text is selected and send the selected text as a url parameter like this: translate.php?word={selected text}. This needs to work even though the text is in separate spans, partial text of a span, not in a span, etc; basically any text selected on the page.

I found the code below (jsfiddle), but I can't figure out how to integrate it into what I already have:

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

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

Here is what my html looks like:

    <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>
...

Answer 1

in my opinion using such a huge library to get what you're trying to do is not a good idea whilst you can easily do it without the plugin, also what you're trying to do seems to be impossible via the plugin 'cause your action is neither click nor hover which the plugin supports.

here is a demo without the plugin DEMO

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;
}

Answer 2

Try calling getSelectedText() from the ajax call. But do it on mouseup. This will check to see if any selected text is returned from your function and then make the ajax call if it has.

$('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 '';
}