How to enable bootstrap popover to open and close multiple times? - javascript

I want a popover using bootstrap that can be closed through clicking on a button within the popup. But I after closing, I have to click twice on the button to open the popover again.
I currently have the following implementation:
HTML:
<button type="button" id="example" class="btn btn-primary">example</button>
JAVASCRIPT:
$(document).ready(function() {
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>Title</strong></span>'+
'<button type="button" id="close" class="close"
onclick="$("#example").popover("hide");
">×</button>',
content : 'Content'
});
});
How can I implement a close-button in the popover without having to click twice on the button to re-open the popover?

You can fix this by adding click() event.
$(document).ready(function() {
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>Title</strong></span>'+
'<button type="button" id="close" class="close"
onclick="$("#example").popover("hide").click();
">×</button>',
content : 'Content'
});
});

Related

Insert Data Attribute into Bootstrap 5 Popovers

I have a series of buttons that contain a data-attribute that I want to insert into the popover they toggle.
HTML:
<button type="button" class="btn btn-yellow btn-deleteTeacher" data-bs-toggle="popover" role="button" data-username="farkle86">
<i class="fa-solid fa-circle-xmark"></i>
</button>
JS:
$('[data-bs-toggle="popover"]').popover({
html: true,
container: 'body',
placement: 'top',
content: "<a href='teachers.asp?action=delete&user="+$(this).data('username')+"'>Click Here</a> to permanently delete this teacher."
});
When I hover over the text link in the popover, the variable is 'undefined'. I don't know how to properly acquire the username data attribute.
The issue is because this within the popover() declaration isn't the element the data attribute exists on. To get a reference to the element you would need to loop through them manually when declaring the popovers:
$('[data-bs-toggle="popover"]').each((i, el) => {
let $el = $(el);
$el.popover({
html: true,
container: 'body',
placement: 'top',
content: `Click Here to permanently delete this teacher.`
});
});

keep focus on Tippy.js when click button into tooltip with angular and Fullcalendar

i need a suggestion about fullcalendar and tippyjs (https://atomiks.github.io/tippyjs/).
so, this is my event into fullcalendar:
so as you can see when mouseover on event i show the tippy js like this:
eventMouseEnter(ev: any) {
console.log('eventMouseEnter: ', ev.el);
const template = document.getElementById('template');
tippy(ev.el, {
content: template.innerHTML,
allowHTML: true,
interactive: true,
interactiveBorder: 30,
zIndex: 999999999999999999999999,
theme: 'light'
})
}
this is my html code:
<div id="template" tabindex="0">
<div class="tippy-box" tabindex="0">
<button mat-raised-button tabindex="0">button</button>
<span tabindex="0">
<select>
<option>one</option>
</select>
</span>
</div>
</div>
the problem is, i can't get click on button, or select...every click my event return is on fullcalendar event, but not tippy js button...
how can i solve this? I need to have the click focus only on tooltip of tippy js when open.
THanks

Can't display html in Bootstrap 3 popover

I have a web page to test out a Bootstrap 3 popover and need to display html in the body.
Here is the html for the button that displays the popover and a hidden div that I use as a template for the popover body.
<button class="btn btn-default" id="status-add" type="button" data-toggle="popover">Add</button>
<div id="popover-content" class="hidden">
<form method="post">
<div class="form-group">
<label class="control-label">Room Status</label>
<input class="form-control" type="text">
</div>
<button class="btn btn-default btn-xs" type="submit">Submit</button>
</form>
</div>
Here is the javascript to display the popover. My apologies for the bad formatting, pasting it in as code doesn't work for some reason.
$(function () {
$('[data-toggle="popover"]').popover()
})
$('#status-add').popover({
trigger: 'click',
html: true,
title: "Add new room status",
content: function() {
var html=$("#popover-content").html()
console.log(html)
return html
},
placement: 'right'
});
The popover is displayed with the correct title but the body is empty. I can see from the console log that the html variable has the correct html in it. I also tried setting the popover html setting to false which makes the html appear in the body as plain text.
Any ideas?
I found the answer to this, it's a bootstrap bug documented at https://github.com/twbs/bootstrap/issues/28290. The solution is to include sanitize: false in the popover settings array.

Bootstrap Popovers not working in Popup modals (not z-index)

Okay, so I have created a popover to show users hints of what buttons are for etc, well, they work on my website but when I try to use one inside a popup modal it doesn't iniate.
None popup modal:
Popup modal
MY Javascript to iniate the popup modal:
$('[data-toggle="popover"]').popover({trigger: "hover", placement: 'auto left'});
To load my modals I am using $.ajax() (if that's any help) like so:
//$(document).off('click');
$(document).on('click', "a[data-target='#globalModal']", function (ev) {
ev.preventDefault();
$("#globalModal").modal("show");
var target = $(this).attr("href");
$.ajax({
url: target,
type: 'GET',
async: false,
}).done(function(data)
{
$(".modal-content").html($(data).find('.inner_modal'));
$(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>');
}) ;
});
How I am creating my popover tooltips:
<i class="fa fa-building" data-toggle="popover" title="Hint:" data-content="Get Driving directions"></i>
How can I fix this? It works but just not inside modals?
So you have to call popover after you load your icons.
}).done(function(data) {
$(".modal-content").html($(data).find('.inner_modal'));
$(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>');
$('[data-toggle="popover"]').popover({trigger: "hover", placement: 'auto left'});
});

Get hidden input value and view in popovers JavaScript

Did read data from hidden and view in a modal window - it worked. Changed from modal to popovers - stopped working. I do not know how to correct. Help please, tried a lot of things. http://jsfiddle.net/popovers
<div id="myPopoverContent">
.....
<span id="ip_view">no ip</span>
</div>
<a tabindex='0' class='btn btn-danger' role='button' id='pop' data-toggle='popover' data-trigger='focus'>
Check
<input id='ip_id' type='hidden' value='94.45.43.42'>
</a>
<a tabindex='0' class='btn btn-danger' role='button' id='pop' data-toggle='popover' data-trigger='focus'>
Check
<input id='ip_id' type='hidden' value='83.218.164.204'>
</a>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle=popover]').popover({
content: $('#myPopoverContent').html(),
placement: 'bottom',
html: true
}).click(function() {
var ip = this.firstElementChild.value;
document.getElementById('ip_view').innerHTML = ip;
$(this).popover('show');
});
});
</script>
I do not understand why is not working. In modal or alert - work http://jsfiddle.net/modal
The content of the popup is set on create, so even though you update the value inside myPopoverContent, the content was set to the original html of the div when the document was ready (which is <span id="ip_view">no ip</span>). Here's a better and cleaner way of getting the content when the popup is opened.
Code
Fiddle
$('[data-toggle=popover]').popover({
content: function(){return $(this).children("#ip_id").val();},
placement: 'bottom'
});
Edit: Had the wrong fiddle link

Categories