弹出窗口与活动文本框的绑定位置

Question

我试图弄清楚如何设置相对于 selected_element 的顶部和左侧值（在弹出触发时处于活动状态），类似于工具提示。我尝试将 $().position() 与 jQuery 一起使用，但这不会覆盖我使用 CSS 设置的默认 0,0。

这是一个 JSFiddle：https://jsfiddle.net/sethkillian2/cd6agg73/3/ 按住 a、c、e、i、o 或 u 可触发菜单。

另外，这是我尝试的一部分：

 $(popup).position({
  of: $(activeElement),
  my: 'left top',
  at: 'left top',
  offset: '0 0'
});
$('body').append(popup);

将位置属性更改为绝对值以外的任何值似乎也不起作用，因为字符菜单会展开。我还尝试在使用 $("#charMap").position(...) 附加元素后直接通过 ID 获取元素。

更新：对于它的价值，我也尝试过使用 textarea-caret-position 组件 (https://github.com/component/textarea-caret-position)，但这似乎并不准确。

Answer 1

margin-top 和 margin-left 属性在 CSS 中为 #ta 设置；您可以使用.css() 为popup 获取和设置相同的属性

$(popup).css($(activeElement).css(["marginTop", "marginLeft"]));

jsfiddle https://jsfiddle.net/cd6agg73/9/