CODEWITHSUNDEEP
javascriptjquery
Kaustubh
Kaustubh

Reputation: 127

how to add tooltip triggered on clicking any word of the paragraph?

function get_selection() 
            {
                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; 
            }
            $(document).dblclick(function(e) 
            {
                 var t = get_selection();
                 alert(t);
            });

I wanted to use a JQuery plugin for toolbar(toolbar.js) inside the function where we obtain the word which is being double clicked,Is it possible? Please guide.

Upvotes: 0

Views: 278

Answers (1)

Mikey
Mikey

Reputation: 6766

One way you might be able to do it is by wrapping the selected text in a <span/> tag in order to attach the plugin.

$(document).dblclick(function() {
    var span = document.createElement('span');
    var sel = document.getSelection();
    if (sel && sel.rangeCount) {
        var range = sel.getRangeAt(0).cloneRange();
        // wrap text in span element
        range.surroundContents(span);
        sel.removeAllRanges();
        sel.addRange(range);
        // show tooltip
        $(span).toolbar({
            content: '#toolbar-options',
            position: 'top'
        // remove span when tooltip hides
        }).on('toolbarHidden', function (e) {
            $(span).contents().unwrap('span');
        });
    }
});

Demo

This should give you start as you'll need to make adjustments to determine if selected text is a word.

Upvotes: 1

Related Questions