在文本区域光标旁边设置Bootstrap Popover位置

如何解决在文本区域光标旁边设置Bootstrap Popover位置

我正在使用引导程序弹出窗口向用户显示提示，他们可以从列表中选择提示并将其插入到textarea中。他们可以使用按钮打开弹出窗口，也可以在文本区域中输入“％”字符时进行操作。弹出窗口可以很好地打开，并且位于弹出窗口链接（“合并字段”链接）的右侧。但是，当用户输入'％'字符时，我希望弹出框直接在光标旁边而不是弹出框链接旁边打开。请看图片

。

我一直在尝试，但似乎找不到解决办法。你们好人可以帮我吗？我还添加了代码。

$(document).ready(function () {

        $("[data-toggle=popover]").popover();

        $('body').on('click',function (e) {
            $('[data-toggle=popover]').each(function () {
                // hide any open popovers when the anywhere else in the body is clicked
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });

        
        $('#textMsgCandidateOverview').on('keypress',function (e) {
            if (e.keyCode === 37) {
                debugger;

                $('#linkPop').trigger('click');
            }

        });

        $('body').on('click','#ulMergeField .list-group-item',function () {

            debugger
            var value = $(this).attr("id");
            $(this).parents('.popover').remove();
            var target = document.getElementById("textMsgCandidateOverview");
            start = target.selectionStart;
            if (target.setRangeText) {
                //if setRangeText function is supported by current browser
                target.setRangeText('%' + value + '%')
                target.focus();
                target.selectionEnd = start + 2 + value.length;
            }
            else {
                target.focus()
                document.execCommand('insertText',false /*no UI*/,'%' + value + '%');
            }

        });

    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="form-group row">
  <div class="col-md-12">
     <a id="linkPop" tabindex="0"
                       class="btn btn-sm btn-primary"
                       role="button"
                       data-html="true"
                       data-toggle="popover"
                       data-trigger="click"
                       data-content="<div class='form-group'><ul id='ulMergeField' class='list-group'><li id='contact_name' class='list-group-item border-0'> Contact name</li><li id='contact_first_name' class='list-group-item border-0'> Contact first name</li><li id='contact_last_name' class='list-group-item border-0'> Contact last name</li><li id='contact_email' class='list-group-item border-0'> Contact email</li><li id='contact_phone' class='list-group-item border-0'> Contact phone</li><li id='contact_address' class='list-group-item border-0'> Contact address</li><li id='agent_name' class='list-group-item border-0'> Agent name</li><li id='agent_first_name' class='list-group-item border-0'> Agent first name</li><li id='agent_last_name' class'list-group-item border-0' Agent last name</li><li id='agent_email' class='list-group-item border-0'> Agent email</li><li id='agent_phone' class='list-group-item border-0'> Agent phone</li></ul></div>">Merge Fields</a>                 
  </div>              
</div>
<textarea name="textMsg" id="textMsgCandidateOverview" class="form-control" placeholder="type starting with % for merge fields" required></textarea>