Bootstrap popover appear over a different element than its trigger

Question

I want the popover to appear to another element rather then the trigger. Currently I have:

 $triggerElement.popover({
                title: varTitle,
                content: varContent,
                html: true,
                placement: 'auto top',
                trigger: 'manual'
            });
..........
<div class="shopper"></div> 

<button type="button" class="btn btn-primary">Add</button>

Currently the popup fires off (button click event) correctly and is positioned at the bottom of the page. However I would like the position to be set to the top right hand element at the div 'shopper' (bottom of the div). Is this possible with selector or can you help me with CSS.

The button fires off the popover which is drawn above the button currently. But i want to popover to be drawn just below the shopper div tag. So the shopper div tag will be the acting trigger.

Answer 1

If I understand what you want, you need to manually show/hide the popover like this..

$('.shopper').popover({
  title: "varTitle",
  content: "varContent",
  html: true,
  placement: 'bottom',
  trigger: 'manual'
});

$('#trigger').click(function(){
  $('.shopper').popover('toggle');
});

Demo: http://www.bootply.com/7oM1aoycIi

Answer 2

I am using bootstrap where event from other text will trigger popover on the selected textbox where we want to show popover

$(function () {
     var showPopover = function () {
        $(this).popover('show');
    }
    , hidePopover = function () {
        $(this).popover('hide');
    };
    
    $('#has-popover').popover({
        content: 'Popover content',
        trigger: 'manual'
    })
    .focus(showPopover)
    .blur(hidePopover)
    .hover(showPopover, hidePopover);
    
    $('#no-popover').on('change',function(){
debugger;
$('#has-popover').popover('show');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet"/>

<input id='no-popover' type='text' placeholder='write here something to popover on next textbox'/>
<input id='has-popover' type='text' placeholder='hover or focus me' />