I am loading external JSON and would like to use Bootstrap popvers.
Their sample code is like:
HTML:
<button data-toggle="popover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">jonathan</button>
and presumably:
$('[data-toggle="popover"]').popover();
However, it would seem since this is from loaded JSON, I would have to do something like:
$('body').on('click', '[data-toggle="popover"]', function(){
// would I call somehtig like
$(this).popover();
});
The only way I can get this to work is like:
$(window).load(function(){
$('body').on('click','[data-toggle="popover"]', function(){
//alert('here i am');
$(this).popover();
});
});
and it only works on the second click. How would I implement this? I'd rather have it just be a hover rather than a click too
The reason for the popover to come on the second click is the way you're initializing your popover.
$(window).load(function(){
$('body').on('click','[data-toggle="popover"]', function(){
//alert('here i am');
$(this).popover();
});
});
Here you're initializing without any options so the default trigger for your popover will be click event and you're doing this initialization when you click on the body. That's the reason you need 2 clicks to show the popover.
To avoid this, you need to register the popover on your button on page load and define the trigger of your interest (click or hover) using data-trigger attribute in HTML.
HTML
<a id="example" tabindex="0" class="btn btn-lg btn-danger"
role="button" data-toggle="popover"
data-trigger="hover" title="Dismissible popover"
data-content="And here's some amazing content. It's very
engaging. Right?">
Dismissible popover
</a>
JS
$(document).ready(function(){
$('#example').popover();
});
You can also define the trigger and other options while initializing the popover like below.
$('#example2').popover({
trigger : 'hover'
});
Here's a Pen to showcase the implementation.
Related
I'm implementing a function such that when you hover a link it will show a tooltip.
Here is an example:
Is there any other javascript library that implements this functionality?(preferably the same one as the image)
If you are using Bootstrap you have Popover.js available
//JS
$(function () {
$('[data-toggle="popover"]').popover()
})
//HTML
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
Click to toggle popover
</button>
You can change the trigger value for the Popover to be a hover also.
Second option for Bootstrap is Tooltip although it does not look like your example.
Also jQuery UI has it's own version of Tooltip
Also recommend you to see on hint.css - Pure css hint library
This might help.
You can do it with help of css or title in any tag in HTML.
http://webdesign.tutsplus.com/articles/quick-tip-tooltips-courtesy-of-html5-data-attributes--webdesign-4826
I have a web app where I use Bootstrap-popovers a number of times. These popovers contains HTML and are used to display small forms and such.
The idea is to "dim" the background with a black transparent overlay whenever a popover is shown in order to minimize distractions for the user.
I've gotten the basics down quite easily, but I really cannot get it to work as I want.
The desired functionality is: Whenever a button triggers a popover, the overlay should show in the background, covering the rest of the page.
When the popover is dismissed, either by it's save button, by it's cancel button or by a second click on the original trigger button, the overlay shall hide again.
This is my code:
HTML
<html>
<head>
// loading bootstrap.css
// loading main.css
// loading jquery.min.js
// loading bootstrap.min.js
// loading main.js
</head>
<body>
<div class="fadeMe" style="display:none"></div>
// ...lots of content
<div id="newReward" class="reward-markup edit-area">
<a href="#!" id="addRewardBtn" class="btn btn-primary trigger">
ADD REWARD
</a>
<div class="head hide">
<h4>NEW REWARD</h4>
</div>
<div class="content hide">
// ...small HTML-Form which works fine
<button class="btn btn-warning pull-left" onclick="$('.popover').popover('hide');">CANCEL</button>
<button class="btn btn-warning pull-right" onclick="addReward()">SAVE</button>
</div>
</div>
</body>
</html>
MAIN CSS
.fadeMe
{
opacity:0.7;
filter: alpha(opacity=20);
background-color:#000;
width:100%;
height:100%;
z-index:1;
top:0;
left:0;
position:fixed;
}
MAIN JS
$(function(){
$(".trigger").on('show.bs.popover', function(){
$("div.fadeMe").show();
});
$(".trigger").on('hidden.bs.popover', function(){
$("div.fadeMe").hide();
});
});
$('.reward-markup > .trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
},
container: 'body',
placement: 'bottom'
});
This is not working though. Triggering the popover brings out the overlay as it should, but dismissing the popover with the original triggerbutton leaves the overlay without hiding it, and thereafter wrecks the popover functionality alltogether (cancel button functions as it should). Strange thing is though, that if you supplement the jquery show/hide calls with simple alerts, the whole things works fine with trigger button showing alerts accordingly:
$(".trigger").on('show.bs.popover', function(){
alert('The popover is about to show.');
});
$(".trigger").on('hide.bs.popover', function(){
alert('The popover is now hidden.');
});
And even more strange: If you add both alerts and jquery-calls trigger button will show the first alert and then the overlay, but a second click on trigger button will not show second alert and overlay will not hide:
$(".trigger").on('show.bs.popover', function(){
alert('The popover is about to show.');
$("div.fadeMe").show();
});
$(".trigger").on('hide.bs.popover', function(){
alert('The popover is now hidden.');
$("div.fadeMe").hide();
});
Could someone please help me understand what's going on here? It drives me nuts!
i faced some kind of this before ... just for help if it works with you
in the cancel button instead of .('hide'); the popover ...
just try to click the original button again like below ...
<button class="btn btn-warning pull-left" onclick="$('.reward-markup > .trigger').click()">CANCEL</button>
I hope it helps
also check this fiddle .... if it helps
So I've been playing around with the in built popovers from bootstrap. I am pretty new to JS so please be kind!
I've managed to get multiple popovers to show and hide in the way I like but I would very much like them to follow the element that fires the popover when resizing the window and also for the first popover to load when a user loads the page.
I've searched on here and got the first one to show when loading but it doesn't hide when anything else is clicked.
Using
$(function () {
$("#popbadge1").popover('show');
});
my js
$(document).ready(function () {
$("#popbadge1").popover({
html : true,
content: function() {
return $('#hiddenpopbadge1').html();
},
});
$("#popbadge2").popover({
html : true,
content: function() {
return $('#hiddenpopbadge2').html();
},
});
$("#popbadge3").popover({
html : true,
content: function() {
return $('#hiddenpopbadge3').html();
},
});
});
my markup
<ul>
<li><a class="badge1" id="popbadge1" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">1</a></li>
<!-- Popover 1 hidden content -->
<div id="hiddenpopbadge1" style="display: none">
<h3>Content</h3>
</div>
<li><a class="badge2" id="popbadge2" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">2</a></li>
<!-- Popover 2 hidden content -->
<div id="hiddenpopbadge2" style="display: none">
<h3>Content 2</h3>
</div>
<li><a class="badge3" id="popbadge3" href="#" role="button" data-trigger="focus" tabindex="0" data-placement="bottom">3</a></li>
<!-- Popover 3 hidden content -->
<div id="hiddenpopbadge3" style="display: none">
<h3>Content 3</h3>
</div>
</ul>
Ideally I would like the popover to follow the button that triggers it as well when the window is resized.
Anyone able to help?
For me, it's not clear what you mean by...
"I would very much like them to follow the element that fires the popover when resizing the window..."
However, getting the popover to show on page load is just a matter of putting your 1st code snippet inside the (document).ready().
And getting the popover to hide when anything else on the page is clicked is similar to this question, which works with something like this:
$(function () {
// When anything is clicked...
$('*').click(function (e) {
// Except popbadge1
if (e.target.attr != 'popbadge1') {
// Hide the popover
$("#popbadge1").popover('hide');
}
});
});
But there is something going on when you try to click back on the first link, where it won't open the popover. Possibly a conflict with Bootstrap, or something else I missed? Regardless, a simple check to see if the popover has been hidden once before solves it.
Here's the full solution at JSFiddle.
Thanks to grayspace for getting the popover to show one on load and in addition to his answer i set the first popover to focus and it seems to have fixed the slight glitch.
$(function() {
$("#popbadge1").focus();
});
https://jsfiddle.net/j4dut2ux/
Also you will see in the fiddle by displaying as an inline box and adding a div around the .a with relative and absolute positing accordingly the popover now follows its parent.
I am using jquery colorbox 'inline'. It is opening first time from a specific link.
<a class="addFile inline" href="#inline_content">
<img src="img/nav-icons/icon_plis.png" alt="">
Add File
</a>
with the jquery written over
$(".inline").colorbox({inline:true, width:"40%",href:"#inline_content"});
but when I am trying to open another inline content (#inline_content2) from different link(s) on the same page, the previous inline content (#inline_content) is opening. Please help me to resolve the issue.
-thanks
in click event for
$('.inline').on('click',function(e){
e.preventDefault();
$(this).colorbox({inline:true, width:"40%",href:$(this).attr("href")});
});
or you can use .each();
$('.inline').each(function(){
$(this).colorbox({inline:true, width:"40%",href:$(this).attr("href")});
});
if both of them not work make a specific class for each anchor
$(".inline").colorbox({inline:true, width:"40%",href:"#inline_content"});
$(".inline1").colorbox({inline:true, width:"40%",href:"#inline_content1"});
$(".inline2").colorbox({inline:true, width:"40%",href:"#inline_content2"});
... etc
I have a simple link that will fire an ajax call and change a status, and I want that new status reflected (instantly) on the modal form.
Problem is: when I click the link that is on the modal form (below), nothing happens.
<a title="Autoplay" data-placement="top" data-toggle="tooltip" class="glyphicon glyphicon-stop" id="autoplayStatus" href="#"></a>
In $(document).ready(), I have this:
$("#autoplayStatus").click(function(event){
alert('test');
})
Is there something I should do to ensure that jQuery can select and bind to objects on a modal form?
To ensure that jQuery binds to buttons (or other stuff) in modals created by Bootstrap, you should write your event handler like this:
$(document).ready(function() {
$('.container').on('click', '#autoplayStatus', function() {
alert('Ohai!');
});
});
and then, in my example, wrap the anchor tag in a container:
<div class="container">
<a title="Autoplay" data-placement="top" data-toggle="tooltip" class="glyphicon glyphicon-stop" id="autoplayStatus" href="#"></a>
</div>
On a sidenote, it's better practice to use <button> instead of <a> when creating, well, a button. =)