Bootstrap Popover - Showing at the bootom

Question

I want to show a popover when a user selects text on a webpage - The code I am using is the following to display popover

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>

It works but it displays popover at the bottom of the page instead of at the bottom of selected text where I have clearly defined div.

Screenshot is the following

The popover is showing after the footer, how can I make this to show at the bottom of selected text?

Any ideas

Cheers

Answer 1

Try this (not sure if its a good method ;) )

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

after

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

You need to set the top position of popover to the selected text position, not the position of the text containing element.

You also need to pass event

function popNow(evt) {...}

Play here