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

will it be okay if you do it without the tooltipster plugin? I mean why do you need to do something that can be done really easily with less than a kb of code with such a huge plugin? — Amin Jafari, May 27 '16 at 04:29

score 2 · Answer 1 · answered May 27 '16 at 05:36

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

Daniel Patrick · Accepted Answer · 2016-05-23T18:57:10.403

1

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

edited May 23 '16 at 18:57

answered May 23 '16 at 17:28

Daniel Patrick

3,980
6
29
49

Thanks. I need it to only do this if text has been selected. – webmagnets May 23 '16 at 17:47
Try that. That will make the ajax call only if `getSelectedText()` returns anything. – Daniel Patrick May 23 '16 at 17:52
It seems to work only when I select just one span's text, but not if I select multiple span's text. – webmagnets May 23 '16 at 18:01
try this again. I've edited the above to encode the selected text as a URI. – Daniel Patrick May 23 '16 at 18:56

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

2 Answers2