/**
 * Get the caret position,relative to the window 
 * @returns {object} left,top distance in pixels
 */
function getCaretGlobalPosition(){
    const r = document.getSelection().getRangeAt(0)
    const node = r.startContainer
    const offset = r.startOffset
    const pageOffset = {x:window.pageXOffset,y:window.pageYOffset}
    let rect,r2;

    if (offset > 0) {
        r2 = document.createRange()
        r2.setStart(node,(offset - 1))
        r2.setEnd(node,offset)
        rect = r2.getBoundingClientRect()
        return { left:rect.right + pageOffset.x,top:rect.bottom + pageOffset.y }
    }
}

/////////////////[ DEMO ]\\\\\\\\\\\\\\\\\\\\

const contenteditable = document.querySelector('[contenteditable]')
const infoElm = document.querySelector('.info')

contenteditable.addEventListener('input',onInput)

function onInput(){
  const caretGlobalPosition = getCaretGlobalPosition()

  infoElm.style.cssText = `top:${caretGlobalPosition.top}px;
                           left:${caretGlobalPosition.left}px;`
}

.info{
  border: 1px solid gold;
  padding: 8px;
  background: rgba(255,255,224,.8);
  position: absolute;
  z-index: 9999;
  max-width: 180px;
  display:none;
}

.info[style]{ display:block; }

<h2>Place caret somewhere and type:</h2>
<div contenteditable>
  <p>
    Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
    <strong>Ut enim ad minim veniam</strong>,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  </p>

  <h2>
    Imagine the caret is somewhere here and the info element is right under it... <div>reprehenderit <em>in</em> voluptate</div> 
    velit esse cillum dolore eu fugiat f nulla pariatur. Excepteur sint occaecat 
    cupidatat non proident,sunt in culpa qui officia deserunt <small>mollit anim</small> 
    id est laborum.
  </h2>
</div>
<div class='info'>Extra info with a long list of some content goes here</div>