how to show text suggestion poppoer in content editable

Question

I want to show a popper based on caret position like this

I have tried with tippy js with popper js configuration but this did not work.i need to show a dynamic popper based on caret position which position will be changed while typing.


 <div contenteditable="true">
        <p></p>
    </div>

    tippy('div', {
        content: 'tooltip!',
        followCursor: true,
        trigger: 'keypress',
        placement: 'left',
    });

this doesn't move the tooltip while typing. Also tried to change offset but did not work and the tooltip position stays at end every time.