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,
Related
I'm trying to get bootstraps popover working on a glyph icon within a span, but it's just not working.
In my html:
<span class="glyphicon glyphicon-exclamation-sign" data-toggle="popover" tabindex="0" title="Offer Details" data-content="Some stuff goes here"></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
In my JS:
$(document).ready(
$(function () {
$('[data-toggle="popover"]').popover({
placement : 'top',
trigger: 'focus click',
})
})
);
When I click on the glyph, I can see in the console that the span gets appended with aria-describedby="popover41686" and when I click away it gets removed. Thus the functionality of the popover seems to be working, just that my actual popover isn't being displayed.
I implemented a similar thing with Bootstrap's tooltips prior to this and had no issues. Could it be something to do with the span, as I found info saying the tabindex needed to be set because a span isn't normally focusable?
I am trying to run an alert when clicking at a <a> tag.
$('#login-button1').click(function() {
alert(1234);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a ui-sref="tabsController.inCio" id="login-button1" class="button button-stable button-block LoginButton1" href="#/tabsController/home">Login</a>
Nothing happens when I click the button. I ve tried many other ways to run the alert but none of them seems to have affected the tag.
Console log does not display any error message.
It seems that your project is AngularJS.
If you use AngularJS, you can use ng-click directive.
In HTML:
<a ui-sref="tabsController.inCio" ng-click="alertMethod()" class="button button-stable button-block LoginButton1">Login</a>
In Controller:
$scope.alertMethod = function () {
alert(1234);
}
It is supposed to work, everything looks alright, make sure you have jQuery imported correctly. like:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
or whatever version of jQuery you are wishing to use, code works fine with above version as seen in this Fiddle
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'
);
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");
});
});
I am using bootstrap popover with angular template. I am including the angular template with ng-include directive. The template consists of a popover. I am trying to bring that popover through a angular directive but it's not getting displayed.
angular directive
angular.module('app').directive('popover', function () {
return {
link: function (scope, element, attrs) {
$("[data-toggle=popover]").popover();
}
};
});
The following html template is being included from another html page with ng-include directive.
<div>
<span class="title">
<button title="" data-original-title="" class="popper btn-link" popover data-toggle="popover">4 Peoples</button>
<div class="popper-content hide">
<p>
<span> Alex</span>
</p>
<p>
<span>Francis</span>
</p>
<p>
<span>Mark</span>
</p>
<p>
<span>Peter</span>
</p>
</div>
</span>
</div>
But, if I click the button the popover is not getting displayed.
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.
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>
Here is the plunkr :
https://plnkr.co/edit/fBPJ8LfOFGlgcCHvRWSM?p=preview
There are plenty way of achieving what you want. By the way I recommend you to read this :
"Thinking in AngularJS" if I have a jQuery background?
Regards,