Всплывающая подсказка при выборе текста

Question

Я хочу создать всплывающую подсказку, которая вызывается выделением текста (перетаскивание левой кнопкой мыши по тексту). Желательно, создав плагин JQuery.

Моя конечная цель - когда пользователь выбирает / выделяет предложение, фразу, абзац, он вызывает всплывающую подсказку. Всплывающая подсказка будет содержать кнопки социальных сетей, которые позволят пользователю опубликовать выборку в своем личном профиле.

Так что, если вам нравится конкретная цитата, вы можете выбрать ее, щелкнуть «поделиться» в твиттере, она вызовет твиттер-API, чтобы опубликовать выборку (если над 140 символами добавится многоточие) с сокращенным URL-адресом обратно страница выбора.

Очевидно, что это потребует некоторой разработки, но, как проектировщик внешнего интерфейса, мне просто нужно, чтобы мяч заработал. Спасибо за любую помощь, которую вы можете предоставить.

Пример желаемой функциональности аналогичен тому, как работает расширение apture: http://www.apture.com/extension/

Answer 1

Вот небольшая демонстрация: http://jsfiddle.net/sje397/fNt22/

Он просто отслеживает выделенный текст по таймеру и отслеживает положение мыши, а затем создает зависающий элемент div с кнопкой «Поделиться» в позиции мыши, когда выбранный текст не пустой.

var mousePos;
$(document).mousemove(function (e) {
    mousePos = {left: e.pageX + 20, top: e.pageY + 20};
});

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

function checkSelectionChanged() {
    var current = getSelectedText();
    if(current != selectedText) {
        selectedText = current;
        if(selectedText != '') {
            $('#quote #text').text(selectedText);
            $('#quote').offset(mousePos);
            $('#quote').show();
        } else {
            $('#quote').hide();
        }
    }
}

setInterval(checkSelectionChanged, 1000);

Answer 2

Я уже написал этот плагин:)

http://www.latentmotion.com/search-and-share

Вы можете приспосабливаться ко всему, что вам нравится, если вы отдаете должное.

---

Я также написал несколько более забавный, но никогда не проверял его полностью (это вроде альфа):

http://seox.org/pro-beta.html