CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user2906420
user2906420

Reputation: 1269

Bootstrap popover appear over a different element than its trigger

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.

Upvotes: 5

Views: 4087

Answers (2)

Sufiyan Ansari
Sufiyan Ansari

Reputation: 1946

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' />

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362360

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

Upvotes: 7

Related Questions