javascript - Bootstrap Popover - 显示在底部

Question

我想在用户选择网页上的文本时显示一个弹出窗口 - 我使用的代码如下显示弹出窗口

HTML

<div id="popover-content" style="display:none">
    <button class="pop-sync">Share</button>
    <button class="pop-delete">Save</button>
</div>

Javascript

<script>
    var div = null;
    function popNow() {
        var selection = window.getSelection(), 
            range = selection.getRangeAt(0), 
            rect = range.getBoundingClientRect(); 

        if (rect.width > 0) {
            if (div) {
                div.parentNode.removeChild(div);
            }
            div = document.createElement('div'); // create div to show popover on          
            document.body.appendChild(div); // append div with selected text
            var popOverSettings = {
                placement: 'bottom',
                container: 'body',
                html: true,
                div: '[rel="popover"]', //setting div for popover
                content: function () {
                    return $('#popover-content').html();
                }
            }
            $('body').popover(popOverSettings);
        }
    }
    window.onmouseup = popNow;
</script>

它有效，但它在页面底部显示弹出窗口，而不是在我已明确定义 div 的选定文本底部显示弹出窗口。

截图如下

弹出窗口显示在页脚之后，我怎样才能让它显示在所选文本的底部？

任何想法

干杯

Answer 1

试试这个(不确定它是否是一个好方法；))

setTimeout(function() {
        $(".popover").css({"top": evt.clientY + 10, "left": evt.clientX - 100});
      }, 500);

之后

$('body').popover(popOverSettings);

需要将弹出窗口的顶部位置设置为所选文本位置，而不是文本包含元素的位置。

你还需要传递事件

function popNow(evt) {...}

播放 here