I have two bootstrap popovers and they should be able to open the sidepanel.
Also please find the related code in JSFiddle
https://jsfiddle.net/bob_js/eLLaacju/
I wanted to achieve the below issue:
The popover should open on data-trigger="hover" and stay as it has content in which if we can click the Text (Click Me) it should open a sidepanel. data-trigger='focus' doesn't help either.
Could you please help me, below is the related code to it.
HTML
<i id="popover-a" class="circle-macro" tabindex="0" data-container="body" data-html="true" data-trigger="focus" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-a" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
<i id="popover-b" class="circle-macro" tabindex="1" data-container="body" data-html="true" data-trigger="focus" data-toggle="popover" data-placement="right">i</i>
<div id="popover-content-b" class="hidden">
<div>
<h6><b>Heading</b></h6>
<p>Content Click Me</p>
</div>
</div>
jQuery:
$(function () {
$("#popover-a").popover({
html: true,
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true,
content: function(){
return $('#popover-content-b').html();
}
});
})
CSS:
.hidden{
display: none;
}
The below code helps me:
$(function () {
$("#popover-a").popover({
html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
content: function(){
return $('#popover-content-a').html();
}
});
$("#popover-b").popover({
html: true, trigger: 'click hover', delay: {show: 50, hide: 4000},
content: function(){
return $('#popover-content-b').html();
}
});
})
Related
I want to send data via jquery (jquery-3.2.1.min.js) and ajax from inside of a bootstrap popover.
The popover works fine, but I cannot get the submit to work.
I initialized the popover with
$(document).ready(function() {
$(function(){
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
});
This is the html trigger:
<span tabindex="0" role="button" data-toggle="popover" data-placement="right" data-popover-content="#comment230" data-original-title="" title="">
<img src="/ds/img/comment.svg" alt="comment" height="16px">
</span>
And this is the html inside the popover:
<div id="comment225" style="display:none;">
<div class="popover-heading">Comments</div>
<div class="popover-body">
<div class="commentbody">
<div>
<fieldset>
<div class="input text">
<label for="comment">Comment</label>
<input name="comment" id="comment" type="text" />
</div>
</fieldset>
<button class="submittest" id="acomment225button">Test</button>
</div>
</div>
</div>
</div>
For testing reasons I did this:
$(".submittest").click(function(e) {
alert('test');
e.preventDefault();
});
The alert does not work from buttons inside the popover, but from buttons placed on the rest of the page.
How can I get this to work?
Those DOM elements are not present at the time you are subscribing to the event.
You need to hook up to events in this fashion:
$(document).on("click", ".submittest", function(e){
alert("test");
});
I gave up on Bootstrap popover, and went looking. I found WebUI Popover which has all the functionality i am looking for.
But I am having trouble setting the title of the popover using the html content of an element on the page. I get undefined in console.log() and the title loads empty. The html I am trying to access is dynamically created.
Where I think there is a bug in the plugin is that the content loads perfectly from another element on the page.
I have a FIDDLE here.
My WebUI Popover code is:
// Popover Menu initialize
$('.icon-popover-menu').webuiPopover({
placement: 'left',
trigger: 'click',
closeable: true,
multi: false,
animation: 'pop',
cache: 'false',
type: 'html',
width: '220',
title: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
content: function() {
return $(this).closest('td.row-icon').find('.btn-row-popover-menu-body').html();
}
});
// Hide popover when screen changes size
$(window).on('resize', function() {
WebuiPopovers.hideAll();
});
$(window).on('scroll', function() {
WebuiPopovers.hideAll();
});
A sample of my HTML is:
<table class="fiddle">
<tr>
<td class="row-icon">
<button class="icon-popover-menu ion-fw btn-row-popover-menu">BTN</button>
<div style="display:none;">
<div class="btn-row-popover-menu-head">
<span>THIS IS THE TITLE</span>
</div>
<div class="btn-row-popover-menu-body">
<div class="input-group" role="group">
<a class="btn btn-app btn-icon-menu btn-popover-first" href="#">
EDIT
</a>
<a class="btn btn-app btn-icon-menu-danger" href="#">
DELETE
<br>
<span class="transaction-menu-legend">DELETE</span>
</a>
</div>
</div>
</div>
</td>
</table>
Any help is appreciated.
title: function() {
return $(event.target).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
},
This works fine. By doing $(this) you are trying to access the title element of the popover which obviously has no closest td.row-icon. Hence it is undefined.
I've used the following code to init the bootstrap popover.
Markup
<a class="help_popup" rel="popover" data-popover-content="#apiSearchTips" data-placement="bottom">
<span class="icon fw-stack fw-lg add-margin-left-1x" stylZ="font-size:10px">
<i class="fw fw-circle fw-stack-2x"></i>
<i class="fw fw-question fw-stack-1x fw-inverse"></i>
</span>
</a>
<div id="apiSearchTips" class="hide help-popover-content" >
//Popover content
</div>
Code
$('a[rel="popover"]').popover({
container: 'body',
html: true,
trigger:'click',
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
This does not work unless I change the selector attribute to a different one rather than rel="popover". For an example say I change it to data-trigger="popover" and it works. Why does this happen?
html
<a class="popper btn" rel="popover" data-toggle="popover"><h3 class="gv layout">Layout Plan</h3> </a>
<div class="popper-content hide">
<img src="images/layout1.jpg" class="btn"/>
<img src="images/layout2.jpg" class="btn"/>
<img src="images/layout3.jpg" class="btn"/>
</div>
script:
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});
i want this to execute on popover show, thanks in advance can any find what is the problem here,
script:
$popover.on("show", function(e) {
$("#transbg").css("padding-bottom","2600px");
});
the below ref code works fine in fiddle but not with my code
var $popover = $(".poper").popover({
trigger: "click"
}).click(function(e) {
e.$("#transbg").css("padding-bottom","260px");
});
$popover.on("hide", function(e) {
$("#transbg").css("padding-bottom","50px");
});
The popover show event syntax is not correct,Can you try the following
HTML
<a class="poper btn" rel="popover" data-toggle="popover">
<h3 class="gv layout">
Layout Plan</h3>
</a>
<div class="popper-content hide">
html
</div>
JS
var abc = $('.poper').popover({
placement: 'bottom',
container: 'body',
trigger: 'hover',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});
abc.on("shown.bs.popover", function (e) {
console.log("popover shown");
});
abc.on("hidden.bs.popover", function (e) {
console.log("popover hidden");
});
Fiddler
Please refer this link regarding bootstrap popover
I am not able to figure out how to display dropdown in popover in bootstrap. All i can find tutorials are just displaying just text and buttons. I need to display dropdown and also have to bind data in it. To display buttons and for its events i have followed the below way.
var popOpts = {
placement: 'left',
title: '<span id="trashcan" class="glyphicon glyphicon-trash"></span>Confirm Delete',
html: 'true',
trigger: 'click',
content: '<p>This will be deleted.<br>Are you sure you wish to continue?</p><br><button id="delete" class="btn btn-danger popover-submit" type="button">Yes</button><button id="cancel" class="btn btn-default" type="button">No</button>',
}
$(".btnDelete").popover(popOpts);
I need to know how to display dropdown and to bind items in popover in bootstrap.
Try like this
You can display anything inside form,and bind the events
HTML
<div class="popover-markup"> Popover link
<div class="head hide">Lorem Ipsum</div>
<div class="content hide">
<div class="form-group">
<select><option>Test</option></select>
</div>
<button type="submit" class="btn btn-default btn-block">Submit</button>
</div>
<div class="footer hide">test</div>
</div>
Script
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
}
});
DEMO