5

I am trying to find a way to show a pop up message when user is trying to highlight and copy text from a paragraph. I've searched around the net for possible solutions but I could not find any that will trigger pop up message when text or random part of the paragraph is selected.

I've looked at this. But it seems that it uses div block rather than pop up.

It seems that @Nishit Maheta answer solved my issue. Shortly I will update the post with my solution.

Cœur
  • 37,241
  • 25
  • 195
  • 267
John
  • 97
  • 7
  • 4
    this will help you ?http://dipaksblogonline.blogspot.in/2014/11/javascript-text-selection-popover.html – Nishit Maheta Oct 12 '15 at 09:12
  • 1
    If you mean text selection, you can use [text selection event](http://stackoverflow.com/questions/3545018/selected-text-event-trigger-in-javascript) in JavaScript. – Ashish Kumar Oct 12 '15 at 09:15

3 Answers3

0

Try this:

tinyMCE.init({
    mode: "exact",
    elements: "test",
    skin: "o2k7",
    skin_variant: "red",

    setup: function (ed) {
        ed.onMouseUp.add(function (ed, e) {
            var x = tinyMCE.activeEditor.selection.getContent();
            if(x)
              alert(x);
        });
    }
});

JSFIDDLE DEMO

Rahul Tripathi
  • 168,305
  • 31
  • 280
  • 331
0

Try Bootstrap Popover. Following is a sample code,

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
  <p  data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</p>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

</body>
</html>
Javed Ahmed
  • 406
  • 5
  • 21
0

It works well for me, hope it will resolve your issue.

 $("#myDiv").mousedown(function(){
    
              $("#myDiv").mouseup(function(){
    
                         $("#myPopUp").show();
              });
    });
#myPopUp
{
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
    hello please select the text and see
</div>
<div id="myPopUp">
    popover message
</div>
CreativePS
  • 1,105
  • 7
  • 15
  • I would possibly consider it as solution, but in my case I found Nishit Maheta solution more relevant. Otherwise with no doubts I could use your proposition. – John Oct 12 '15 at 10:41
  • Great, I have just seen it.. Awesome. – CreativePS Oct 12 '15 at 10:42