html - How do I make links inside my Javascript controlled div to work? -

i created tooltip using code jsfiddle: https://jsfiddle.net/joktrpkz/7/

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 place ele below selection         ele.style.left = (r.left - rb2.left)*100/(rb1.left-rb2.left) + 'px'; //this align right edges          //code set content          ele.style.display = 'block';     } }); window.addeventlistener('mousedown', function () {     ele.style.display = 'none'; }); 

everything works fine noticed html links on tooltip no longer work.

i think mouseup event affecting links not sure.

what preventing links working , how can fix it

that because of mousedown event hides tooltip. if on lines:

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

you notice when hold down click on tooltip, disappears , therefore clicking on "nothing". if comment out part, it'll work.