Popup on table row text highlight (only) i

Question

I have a table with multiple rows. Each column has some text in it. I want to create a popup when any part of string text is selected/highlighted. I researched entire web but unable to find a solution. Can someone help?

This is not a site to request code from others. Instead, you should research this topic and attempt to solve the problem on your own; if there is a specific issue that you are unable to resolve in the process, come back and present it and we can help you out. — Tristan, Dec 06 '15 at 00:43
Hey Tristan, I am new to front end. I tried this before but I was successful in getting popup on text highlight but not specific to table. Hence I tot I could seek somehelp. Thanks for sharing your view — Naveen Nagendran, Dec 06 '15 at 01:20

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

Same question is answered here

function getSelectedText() {
    var text = "";
    if (typeof window.getSelection != "undefined") {
        text = window.getSelection().toString();
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
        text = document.selection.createRange().text;
    }
    return text;
}

function doSomethingWithSelectedText() {
    var selectedText = getSelectedText();
    if (selectedText) {
        alert("Got selected text " + selectedText);
    }
}

document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;

edited May 23 '17 at 11:44

Community

1
1

answered Dec 06 '15 at 00:19

Alizoh

1,562
1
13
16

Hey Zoheiry, I have tried this but div pops on highlight of anytext in the page. However, Mark's solution works. But I need the tip to be right above the text highlighted. Any help would be much appreciated. // HTML CODE HERE $('table').on('mouseup', function(){ var selectedText = window.getSelection().toString(); if (selectedText) { $('#infoDiv').css('display', 'block'); } }) – Naveen Nagendran Dec 06 '15 at 01:14
After getting the element that was selected you can get the position of the element like so. $(your-element).offset().top and $(your-element).offset().left. Now you have the top and left positions. You can display your popup in that same position – Alizoh Dec 06 '15 at 01:20

score 0 · Accepted Answer · answered Dec 06 '15 at 00:56

0

$('table').on('mouseup', function(){
  var selectedText = window.getSelection().toString();
  if (selectedText) {
    alert('Some text was selected');
  }
})

http://codepen.io/anon/pen/PZoxZB

answered Dec 06 '15 at 00:56

mark_c

1,202
1
8
10

Hey Mark. This works like a charm. I need to display a popover right above the text highlighted.
// content goes here
I am new to front end. Any help would be much appreciated. – Naveen Nagendran Dec 06 '15 at 01:07

Popup on table row text highlight (only) i

2 Answers2