position floating div under selection within viewport window - position

Question

How do you position a floating div (i.e. position:absolute, e.g. dialog box) under text that has been selected while still showing the whole div within the viewport window even if the selection is at the edge?

Answer 1

This solution using jQuery works for me. Please see codePen or below:
Javascript:
const floater = $('<div class="floater"><div>^</div>You selected:<div class="selection">...</div></div>')
.appendTo('body').show();
$('#selectable').on('mouseup', function (e) {
const
selected = window.getSelection().toString(),
half_floater_width = floater.width()/2,
x = e.pageX;
if ( selected ) {
let win_w = document.documentElement.clientWidth
floater.find('.selection').html(selected)
if ( half_floater_width + x > win_w ) floater.css({left:'auto', right:0 , top:e.pageY + 8})
else if( x - half_floater_width < 0 ) floater.css({left:0 , right:'auto', top:e.pageY + 8})
else floater.css( {left: x - half_floater_width, right:'auto', top:e.pageY + 8})
}
})
Html:
<div id="selectable">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores mollitia amet laboriosam impedit aliquam, veniam
officiis porro quibusdam, expedita eligendi incidunt, rerum praesentium provident minus laborum. Deserunt illum non
</div>
CSS:
.floater {
position: absolute;
top: 50px;
left: 50px;
width: 150px;
height: 150px;
background-color: #efefef;
border: 2px solid red;
z-index:1;
padding:20px;
font-size: 1.5em;
text-align: center;
resize: both;
overflow:auto;
}