I am currently experimenting with setting the top and left values relative to the selected_element (which is active at the time of triggering the popup) in a manner similar to a tooltip. I attempted to use $().position() in combination with jQuery, but it did not override the default 0,0 set by CSS.
You can view my JSFiddle here: https://jsfiddle.net/sethkillian2/cd6agg73/3/. Press and hold down a, c, e, i, o, or u keys to trigger the menu.
Below is part of my implementation:
$(popup).position({
of: $(activeElement),
my: 'left top',
at: 'left top',
offset: '0 0'
});
$('body').append(popup);
Changing the position attribute to anything besides absolute did not work as expected, causing the character menu to expand. I also tried directly selecting the element by its ID after appending it using $("#charMap").position(...).
Update: In addition to these methods, I experimented with utilizing the textarea-caret-position component (https://github.com/component/textarea-caret-position). However, the results were not accurate for my needs.