How to display popover on top of Textfield - javascript

I never work on these type of stuff.
I have a textField in my html page.it's code is in below.
<div class="span4 mr1 shelflifeDiv">
<input type="text" id="shelfLifeField" name="Shelf Life" placeholder="Shelf Life" class="po1 pull-right" data-toggle="popover" data-placement="bottom" data-html=true data-trigger="click" data-content>
</div>
My requirement is,If you click on that field,I want to display popover,for this my web designer given the following template.
<script id="shelflifePopover" type="text/x-handlebars-template">
<div class='row-fluid'>
<div class='span8'><span>Maximum Time</span></div>
<div class='span8'><input type='text' id='po1_maxtime' placeholder='Shelf life' class='mr2' disabled></div>
</div>
</script>
he said,whenever you want to render popover on top of textField,just add the template code to the data-content attribute of textField.
As per his suggestion, using setAttribute I appended that template code when the field is in focusing state.
If cursor out of text-field,I want to remove(hide)popover on top of textField.
I tried to add template code to data-content attribute,but it's not working.
var ele=document.getElementById("shelfLifeField");
//I compiled template code and assigned to compileCode variable.
ele.setAttribute("data-content",compileCode);
please can anyone help me,Totally I stuck here.
Thanks

you can use the following jquery code to show bootstrap popover, pls see the working fiddle here
$(function () {
var showPopover = function () {
$(this).popover('show');
}
, hidePopover = function () {
$(this).popover('hide');
};
$('#fb').popover({
content: 'Facebook',
trigger: 'hover',
placement:'top'
})
$('#tw').popover({
content: 'Twitter',
trigger: 'hover',
placement:'top'
})
$('#tb').popover({
content: 'tumblr',
trigger: 'hover',
placement:'top'
})
$('#fl').popover({
content: 'flickr',
trigger: 'hover',
placement:'top'
})
$('#yt').popover({
content: 'youtube',
trigger: 'hover',
placement:'top'
})
.focus(showPopover)
.blur(hidePopover)
.hover(showPopover, hidePopover);
});

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.

ColorBox - How to display div using class

My HTML structure is as follows:
<div class="parent">
<span class="read_more">Read More</span>
<div class="hidden description" id="description1">Description</div>
</div>
..
<div class="parent">
<span class="read_more">Read More</span>
<div class="hidden description" id="description2">Description</div>
</div>
My Js code which works for id if I give the id to each description div's
$(".read_more").on("click", function (e) {
var href = '#'+$(this).next().attr('id');
$(this).colorbox({ inline: true, href: href });
});
I am using ColorBox plugin.
When I click on Read More I need the Description to pop up. I am able to achieve this using id and I don't want to give id's to the description as this is dynamically generated. How could I achieve this using class? Is this possible?
Any help appreciated!
ColorBox also accepts HTML. Try the below
$(".read_more").on("click", function (e) {
var html = '#'+$(this).next().html();
$(this).colorbox({ inline: true, html: html });
});
If your css class 'hidden' applies display:none; try this
css:
.not_hidden { display:block }
jquery
$('.read_more').click(function(){
$(this).next('.description').addClass('not_hidden')
})
edited to use classes.
Solved!
I am sorry. I should have paid more attention to the documentation.
// Using a jQuery object:
$(".read_more").on("click", function (e) {
e.preventDefault();
var $desc = $(this).next();
$(this).colorbox({ inline: true, href: $desc });
});

How do I get hidden HTML to appear only in my popover on click, not elsewhere on the page?

I know this may be a weird request, but I am using a popover and I have some HTML in that popover.
However, when my link is clicked it shows both the HTML at the bottom of the page and the HTML in the popover. I just want it to show the HTML in the popover only.
This is my HTML:
<small class="download-notice">Note: This is not a Physical DVD. Downloading & Streaming Only.<br />
Click here for Details about The Masterclass.
</small>
<div id="masterclass-popover-head" class="hidden">Masterclass Contents</div>
<div id="masterclass-popover-content" class="hidden">
Test Content!
<ul>Test
<li>iTem 1</li>
<li>iTem 2</li>
</ul>
</div>
This is my JS:
$(document).ready(function(){
$("#masterclass-popover").popover({
html : true,
placement: 'bottom',
title: function() {
return $("#masterclass-popover-head").clone();
},
content: function() {
return $("#masterclass-popover-content").clone();
}
});
$("small.download-notice a").click(function(e) {
e.preventDefault();
});
$("#masterclass-popover").click(function() {
$("div#masterclass-popover-head").toggleClass("hidden");
$("div#masterclass-popover-content").toggleClass("hidden");
});
});
Edit 1
If you wanted to refactor my JS, you would get an extra +1 for that - because I know it is likely quite inefficiently written.
Edit 2
I had included the wrong link to a live version. Here is the updated one: http://jsfiddle.net/VB32W/1/
$(document).ready(function(){
$("#masterclass-popover").popover({
html : true,
placement: 'bottom',
title: $("#masterclass-popover-head").text(),
content: $("#masterclass-popover-content").html(),
});
});
jsfiddle
$(document).ready(function(){
$("#masterclass-popover").popover({
html : true,
placement: 'bottom',
title: $("#masterclass-popover-head").html(),
content: $("#masterclass-popover-content").html()
});
$("small.download-notice a").click(function(e) {
e.preventDefault();
});
});
Just change your javascript code. the popover function accepts html as its title and content if you set html:true
JS fiddle edited

Categories