Develop Reference

wny popover not display in angular js?

I am using this component in my example, but when I click on my icon, my popover is not displayed.
When I click on an icon it should display the popover but currently, it is not display anything.
Here is my code (and this is the CodePen):
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>hhh</div>
</script>

First, from my own experience I recommend using angular-bootstrap for things in that scope.
Second, if you really want it to work, make sure the bootstrap scripts are correctly loaded. Then try to listen to the click event with ng-click on the button and trigger the popover on it.
Here is the code to achieve what you want.
Here is the plunkr : https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview
Regards,
scope.popover = function() {
$("[data-toggle=popover]").popover({
html: true,
content: $('.popper-content').html(),
placement: attrs.popoverPlacement
});
};
Here is the html:
<button type="button" popover-placement="bottom" class="popper btn-link" popover ng-click="popover()" data-toggle="popover">
4 Peoples
</button>
Regards,

How to make automatic load popover after pages loaded without using click, hover, focus?

I'm using Bootstrap3 and I want to create popover to show in on pages or document has loaded then show popover on the each html element without using hover,click, focus But it worn't work as what I want.
And How can I create disable button on popover when popover pop up after pages loaded which easy for me click hide pop up back?
<script type="text/javascript">
$(document).ready(function(){
$(".popover-examples a").popover({
placement:'auto',
title : 'a',
animation:true,
trigger:'hover',
content:'a',
// delay: { show: 0, hide: 5000000 },
container:'body',
viewport:'#viewport',
template:'<div class="popover"><div class="arrows"></div><input type="button" class="btn btn-warning btn-sm hide-popover" value="Hide"><h3 class="popover-titles">popver-title</h3><div class="popover-contents">contina;lkjdfaksljdf;lajsjdf;asdjfaldsf</div></div>',
});
});
$(".hide-popover").click(function(){
$("button.popover-examples").popover('hide');
});
</script>
here is html element
<td class="popover-examples">
<a data-toggle="popover" href="<?php echo base_url('invoice/edit');?>">
Received Date
</a>
</td>
what should I correct with those above code?
Please help

In your popover setting, the trigger is on hover.
You can change it to "manual", and trigger it using:
$(".popover-examples a").popover("show");

X-editable toggle edit on click of custom edit button

I have a strange problem with the X-editable plugin for twitter-bootstrap.
What i am trying to do is trigger the 'Edit' popup screen on a button that is on the screen.
The problem is that the 'popup' div only stays on the DOM for less then a second.
I will put some example code below. I am not sure if this has something todo with the plugin/ or bootstrap.
$(document).ready(function() {
$('#questionDescription').editable();
$('.descriptionEditButton').on('click', function(e) {
$('#questionDescription').editable('toggle');
});
});
<a href="#" id="questionDescription" data-type="textarea" data-pk="1" data-placeholder="stackOVerflowRocks" data-title="Stack" style="display: inline;">
foo bar
</a>
<i class="btn icon-edit descriptionEditButton pull-right"></i>
What makes it even stranger is when i run the 'toggle' in chrome console the popup is shown.
Thank you!

Have you tried setting toggle to manual? Something like :
$('#questionDescription').editable(
toggle: 'manual'
);

Bootstrap popover isn't placed correctly even with container: 'body' set

I've got a button in a table which should toggle a popover. I have set the data-container="body" as well as I have tried it with the javascript version.
My popover looks like this: (I have clicked the first button)
My button code is here:
<button id="testsettracesBtn1" class="btn btn-large btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</button>
And here my javascript:
<script type="text/javascript">
$("#testsettracesBtn1").popover({ container: 'body'});
</script>
How can i achieve it to place my popover right? (And yes I have the newest bootstrap version.)

I had the same problem, but the source of the bug was that my Bootstrap framework was outdated. I upgraded to 2.3.2 and the container: 'body' attribute started working.
It caused me quite a headache... until I found out the problem was not in my own code!

This strange behaviour is caused because of many select elements in within my table. I don't know why? I just changed the width of the popover to max-width, after the button is being clicked. With the correct width also the arrow is positioned right:
$(document).ready(function(){
$("[id^=kommentareBtn-]").popover({ container: 'body', placement: 'bottom', html: true });
//this fixed my problem...
$("[id^=kommentareBtn-]").click(function() {
$(".popover").css("width", "276px");
});
});

Bootstrap Popover on Image

So I have a list of icons, I'm trying to get a popover to activate when you hover over an icon, I can't seem to get it to work, any help would be appreciated.
<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>
And i have this in a separate js file
$('.icon').popover({placement:'top'});

Put attributes in jquery variable instead of tag
<img class="icon" rel="popover" src="images/brandable.png"/>
Add script as following
<script>
$('document').ready(function() {
var popOverSettings = {
placement: 'top',
selector: '.icon',
title:'Brandable',
trigger: "hover",
content:'This is a popover'
};
$(this).popover(popOverSettings);
});
</script>

this is over a year late, but i found this to work:
Fiddler Link
using this JS:
$(function(){
$('[data-toggle=popover]').popover({
trigger: 'focus',
html: true,
title: 'Toolbox'
})
});
And this html:
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS-eTmHxgicEfq4K-sEz_X52cq56uBP2l8cr_q8ivOavSIca5TYtQ"
data-toggle="popover" tabindex="50" data-content="test <b>text</b>" data-placement="right"/>
You need to allow the image to accept focus with the tabindex property. That was the key for me. Remove the "trigger: 'focus' line if you want the popover to stay open on click events...
Hope it helps!

For your code you have:
<img class="icon" rel="popover" trigger: "hover" data-placement="top" data content="This is a popover"src="images/brandable.png"><br>Brandable</br></li>
trigger: "hover" isn't valid html. Bootstrap help document notes, "Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation=""."
So instead you would want to include data-trigger="hover" also looks like your missing a space before src=.
Also you have placement top in the html and also in the javascript. You only need to declare in one place. So you can delete data-placement="top" from the img tag, or in your javascript you can remove it so it would just be $('.icon').popover({placement:'top'});
Also you have "$" in front of your function. Depending on where that code is located you may have a jquery conflict. To note for sure you'll need to post whichever error you are seeing in your error log. If you use chrome right click > web inspect > click the red x at the bottom and copy any errors you see in there.

$(function(){
$('#poper').popover({
html: true,
trigger:'focus',
content: $('#pop')
});
}
);

Perhaps the easiest way to do this uses the OnMouseOver and OnMouseOut events described in this answer: https://stackoverflow.com/a/10709196/121737
I would prefer to do this using one image, the same width as a normal icon but twice the height. This image would show two icons, one above the other, the upper one being the normal icon, the lower being the rolled over icon:
img.icon {
display: block;
width: 4ex; height: 4ex;
background-size: 4ex 8ex;
background-position: 0 0;
}
img.icon:hover {
background-position: 0 -4ex;
}
img.icon#twitter {
background-image:url('icons/twitter.jpg');
}
img.icon#facebook {
background-image:url('icons/facebook.jpg');
}
After this declaring the icons in HTML is much cleaner:
<img class="icon" id="twitter" />
<img class="icon" id="facebook" />
<img class="icon" style="background-image:url('icons/other_icon.jpg')" />