将文本选择限制为仅一个div JQuery

Question

我在选择文字时会出现一个div。我只想要某个id来触发这个效果。但是，任何选择都会触发它。如何将其限制为#actual_verse？最初，您必须将鼠标悬停在#actual_verse上。但是，之后，您可以选择任何文本并显示div。 如何解决此问题？

$("#actual_verse").mouseup(function() {
        
   // Tool Tip
  
var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1= document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2= document.createRange();
rel2.selectNode(document.getElementById('cal2'));
window.addEventListener('mouseup', function () {
    if (!sel.isCollapsed) {
        debugger;
        var r = sel.getRangeAt(0).getBoundingClientRect();
        var rb1 = rel1.getBoundingClientRect();
        var rb2 = rel2.getBoundingClientRect();
        ele.style.top = (r.bottom - rb2.top)*100/(rb1.top-rb2.top) + 'px'; //this will place ele below the selection
        ele.style.left = (r.left - rb2.left)*100/(rb1.left-rb2.left) + 'px'; //this will align the right edges together

        //code to set content

        ele.style.display = 'block';
    }
});
window.addEventListener('mousedown', function () {
    ele.style.display = 'none';
});

  // End of Tool Tip
 
  
    
  });

/* Tool Kit */

#tooltip {
    position:absolute;
    display:none;
    border:grey solid 1px;
    background:white;
}
#cal1{
    position:absolute;
    height:0px;
    width:0px;
    top:100px;
    left:100px;
    overflow:none;
    z-index:-100;
}
#cal2{
    position:absolute;
    height:0px;
    width:0px;
    top:0;
    left:0;
    overflow:none;
    z-index:-100;
}

/* End of Tool Kit */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='actual_verse'> Hello </span> </span>
<div id='cal1'>&nbsp;</div>
<div id='cal2'>&nbsp;</div>
<div id='tooltip'> Hello </div>

<p> DO NOT SELECT ME!! </p>