How can I display a tooltip (using qTip) next to selected text? The code below captures the selected text in the console, but the tooltip is not displayed.
<div class='test'>Actual text will be much longer...Test Test Test Test Test Test Test Test </div>
Javascript:
$('.test').click(function (e) {
// Get the HTML of the selected text
var html = "";
if (typeof window.getSelection != "undefined") {
var sel = window.getSelection();
if (sel.rangeCount) {
var container = document.createElement("div");
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
container.appendChild(sel.getRangeAt(i).cloneContents());
}
html = container.innerHTML;
}
} else if (typeof document.selection != "undefined") {
if (document.selection.type == "Text") {
html = document.selection.createRange().htmlText;
}
}
// Only proceed if some text is selected
if (html){
console.log(html);
$('.test').qtip({
content: 'This is a selected item',
hide: 'mouseout'
})
}
});