I am trying to run jquery chosen inside a bootstrap popover, but the initiated chosen dropdown is not clickable.
Here is my code:
html
<button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title" >Click to toggle popover</button>
<div style="display: none;" id="popovercontent">
<select class="chosen chzn-done">
<option>Choose...</option>
<option>jQuery</option>
<option selected="selected">MooTools</option>
<option>Prototype</option>
<option>Dojo Toolkit</option>
</select>
</div>
JS
$(document).ready(function(){
// init chosen
var $chosen = $(".chosen").chosen();
// init popover
var $popover = $('#popover').popover({
placement: 'bottom',
html: true,
content: function () {
return $('#popovercontent').html();
},
title: function () {
return $(this).data('title');
},
});
// on show popover
$popover.on("show.bs.popover", function(e) {
console.log('open popover');
$chosen.trigger("chosen:updated");
});
}); // document.ready
https://jsfiddle.net/gdtocsud/
similar question (not answered): Chosen in bootstrap popover not working?
thank you
Bjoern
try this, may be this will help u
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.css">
<script>
$(document).ready(function() {
var $popover = $('#popover').popover({
placement: 'bottom',
html: true,
content: function() {
return $('#popovercontent').html();
},
title: function() {
return $(this).data('title');
},
});
$popover.on("shown.bs.popover", function(e) {
$('.chzn-done').chosen();
});
$popover.on('hidden.bs.popover', function() {
$('.chzn-done').chosen('destroy');
});
});
</script>
</head>
<body style="padding:25px">
<button type="button" class="btn btn-md btn-danger" id="popover" data-title="Popover title">Click to toggle popover</button>
<div id="popovercontent" style='display:none'>
<select class="chosen chosen-select chzn-done" >
<option>Choose...</option>
<option>jQuery</option>
<option selected="selected">MooTools</option>
<option>Prototype</option>
<option>Dojo Toolkit</option>
</select>
</div>
</body>
</html>
Here is the js code :
$(document).ready(function() {
// init chosen
//var $chosen = $(".chosen").chosen();
// init popover
var $popover = $('#popover').popover({
placement: 'bottom',
html: true,
content: function() {
return $('#popovercontent').html();
},
title: function() {
return $(this).data('title');
},
});
// on show popover
$popover.on("shown.bs.popover", function(e) {
$('.chzn-done').chosen();
});
$popover.on('hidden.bs.popover', function() {
$('.chzn-done').chosen('destroy');
});
}); // document.ready
For working code:
Here is fiddle link
Similar to chosen with modal the chosen behaviour needs to be initialized after the content is ready, so similar to modal events, you can use the popover events
Hi here is the working demo
https://jsfiddle.net/gdtocsud/2/
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span data-bind="label">Select One</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Another item</li>
<li>This is a longer item that will not fit properly</li>
</ul>
</div>
</div>
</div>
Related
I'm trying to show bootstrap popover on click and hover events.
I have multiple controls loaded on a page and I'm trying to bind the bootstrap-5 popover without the jQuery dependency for those controls.
In this example, I have used buttons and anchor elements and tried to bind the popover using JavaScript and the popover is getting triggered for both button and anchor elements when used the event hover (trigger: 'hover'), but for the event click(trigger: 'focus') the popover is not showing for anchor elements.
I have used the below code for binding the events to the controls.
document.addEventListener("DOMContentLoaded", function(event) {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="click-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'focus',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="hover-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'hover',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
});
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css">
<button type="button" class="btn btn-primary" people-card="click-action" email="test1#test.com">
Show Card on Click
</button>
<button type="button" class="btn btn-primary" people-card="hover-action" email="test2#test.com">
Show Card on Hover
</button>
<br>
<br>
<ul>
<li>
<a class="people-card" people-card="click-action" email="test1#test.com">Show Card on Click</a>
</li>
<li>
<a class="people-card" people-card="hover-action" email="test2#test.com">Show Card on Hover</a>
</li>
</ul>
<br>
<br>
<button type="button" class="btn btn-primary" people-card="click-action" email="test1#test.com">
Show Card on Click
</button>
<button type="button" class="btn btn-primary" people-card="hover-action" email="test2#test.com">
Show Card on Hover
</button>
<div id="popover-content" style="display:none">
<p>test</p>
</div>
Can someone help me here to make the click event(trigger: 'focus') work for even anchor tags.
So it appears that adding href attribute solves this problem. Alternatively, you could trigger it yourself using show method of the tooltip, whenever your element is clicked.
Don't forget to preventDefault() if needed.
document.addEventListener("DOMContentLoaded", function(event) {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="click-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'focus',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="hover-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'hover',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js">
</script>
<ul>
<li>
Show Card on Click
</li>
<li>
<a class="people-card" people-card="hover-action" email="email#email.com">Show Card on Hover</a>
</li>
</ul>
<div id="popover-content" style="display:none">
<p>test</p>
</div>
I have a three issue in this app.
First issue is that the show button doesn't change its name to "show offer" when the app is closed after we open it.
Second, the app doesn't prevent a user from clicking second and third button. He can click only one offer, but now the user can click on every.
Third, the user can highlight a new offer by clicking once, then he can hide the highlight, but cannot highlight it again and never. Appreciate any help.
//// hide offer before the Dom is loaded
//$('ul').hide()
$(document).ready(function() {
function showHideOffer() {
$('ul').slideToggle();
}
//click to show offers
$('.card').on('click', '.showOffers', showHideOffer, function() {
$('.showOffers').html('Hide Offers');
});
//click to hide offers - change name to show offers doesn't work!!
$('.card').on('click','.showOffers', showHideOfferfunction() {
$('.showOffers').html('Show Offers');
});
// click to book, to show info and close button and span
$('li').on('click', 'button', function(){
var offerName = $(this).closest('.tour').data('name');
var offerPrice = $(this).closest('.tour').data('price')
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked '+offerName+' offer for '+offerPrice+'!</li></ol>');
$(this).closest('.tour').append(message);
$(this).prev().closest('.details').remove();
$(this).remove();
});
// filter new offers by clicking a "new" button
$('#buttons').on('click','.filterNew', function() {
$('.tour').filter('.newOffer').addClass('highlightnew');
$('.highlightpopular').removeClass('highlightpopular');
//click second time and the highlight is hidden
$('#buttons').on('click', '.filterNew', function() {
$('.highlightnew').removeClass('highlightnew');
});
});
// filter by popular offers
$('#buttons').on('click', '.filterPopular', function() {
$('.tour').filter('.popular').addClass('highlightpopular');
$('.highlightnew').removeClass('highlightnew');
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GuidedTours</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.selected {
color: red;
}
.highlightnew {
background: #3D9970;
}
.highlightpopular {
background: #39CCCC;
}
ul {
display:none;
}
</style>
</head>
<body>
<div class="container">
<h2>Guided Tours</h2>
<hr>
<div id="tours" class="card">
<!-- click to show -->
<button type="button" value="Show Offers" class="btn showOffers btn-primary btn-sm">Show Offers</button>
<ul class="list-group list-group-flush">
<li class="usa tour newOffer list-group-item"; data-name="New York" data-price="$550">
<h3>New York, New York</h3>
<span class="details badge badge-success">$1,899 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="europe tour newOffer list-group-item" data-name="Paris" data-price="$450">
<h3>Paris, France</h3>
<span class="details badge badge-success">$2,299 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="asia tour popular list-group-item" data-name="Tokyo" data-price="$650">
<h3>Tokyo, Japan</h3>
<span class="details badge badge-success">$3,799 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
</ul>
<ul id="buttons" class="list-group list list-group-flush">
<button class="filterNew btn btn-info">New</button>
<button class="filterPopular btn btn-info">Popular</button>
</ul>
</div>
</div>
<!-- Scripts -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="guidedtours.js"></script>
</body>
</html>
First Issue Solve : Checkout Here :
Change the code to
$('.card').on('click', '.showOffers', showHideOffer, function() {
//$('.showOffers').html('');
$(this).text( $(this).text() == 'Hide Offers' ? "Show Offers" : "Hide Offers");
});
Instead Of :
$('.card').on('click', '.showOffers', showHideOffer, function() {
$('.showOffers').html('Hide Offers');
});
//click to show offers
$('.card').on('click', '.showOffers', showHideOffer, function() {
//$('.showOffers').html('');
$(this).text( $(this).text() == 'Hide Offers' ? "Show Offers" : "Hide Offers");
});
//click to hide offers - change name to show offers doesn't work!!
$('.card').on('click','.showOffers', showHideOffer);
// click to book, to show info and close button and span
$('li').on('click', 'button', function(){
var offerName = $(this).closest('.tour').data('name');
var offerPrice = $(this).closest('.tour').data('price')
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked '+offerName+' offer for '+offerPrice+'!</li></ol>');
$(this).closest('.tour').append(message);
$(this).prev().closest('.details').remove();
$(this).remove();
});
// filter new offers by clicking a "new" button
$('#buttons').on('click','.filterNew', function() {
$('.tour').filter('.newOffer').addClass('highlightnew');
$('.highlightpopular').removeClass('highlightpopular');
//click second time and the highlight is hidden
$('#buttons').on('click', '.filterNew', function() {
$('.highlightnew').removeClass('highlightnew');
});
});
// filter by popular offers
$('#buttons').on('click', '.filterPopular', function() {
$('.tour').filter('.popular').addClass('highlightpopular');
$('.highlightnew').removeClass('highlightnew');
});
function showHideOffer() {
$('ul').slideToggle();
}
.selected {
color: red;
}
.highlightnew {
background: #3D9970;
}
.highlightpopular {
background: #39CCCC;
}
ul {
display:none;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h2>Guided Tours</h2>
<hr>
<div id="tours" class="card">
<!-- click to show -->
<button type="button" value="Show Offers" class="btn showOffers btn-primary btn-sm">Show Offers</button>
<ul class="list-group list-group-flush">
<li class="usa tour newOffer list-group-item"; data-name="New York" data-price="$550">
<h3>New York, New York</h3>
<span class="details badge badge-success">$1,899 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="europe tour newOffer list-group-item" data-name="Paris" data-price="$450">
<h3>Paris, France</h3>
<span class="details badge badge-success">$2,299 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
<li class="asia tour popular list-group-item" data-name="Tokyo" data-price="$650">
<h3>Tokyo, Japan</h3>
<span class="details badge badge-success">$3,799 for 7 nights</span>
<button class="book btn btn-primary">Book Now</button>
</li>
</ul>
<ul id="buttons" class="list-group list list-group-flush">
<button class="filterNew btn btn-info">New</button>
<button class="filterPopular btn btn-info">Popular</button>
</ul>
</div>
</div>
To Resolve your first issue modify your function like below
var ValuesShowOrHidden = 0;
$('.card').on('click', '.showOffers', showHideOffer, function () {
if (ValuesShowOrHidden == 0) {
$('.showOffers').html('Hide Offers');
ValuesShowOrHidden = 1;
}
else if (ValuesShowOrHidden==1) {
$('.showOffers').html('Show Offers');
ValuesShowOrHidden = 0;
}
});
For the Second Issue try the below modification in your function
$('li').on('click', 'button', function () {
var offerName = $(this).closest('.tour').data('name');
var offerPrice = $(this).closest('.tour').data('price')
var message = $('<ol class="breadcrumb"><li class="breadcrumb-item active" style="color:#3CB371">Success! You have booked ' + offerName + ' offer for ' + offerPrice + '!</li></ol>');
$(this).closest('.tour').append(message);
$(this).prev().closest('.details').remove();
$(this).remove();
$('li').unbind("click");
});
I'd like to just simply update the tooltip each time on hover before display. I have a warning icon that pops up if there's been an error, and on hover I'd like the most recent error to show up. What I have doesn't work, though.
HTML Snippet
<div id="title">App</div>
<button id="warningbtn" type="button" class="btn-default btn-sm"
data-toggle="errortip" data-placement="right" title="">
<span class="glyphicon glyphicon-warning-sign"></span>
</button>
JavaScript/JQuery:
function start(){
let result = addon.start();
if (result == -1){
recentError = "Your license is invalid.";
}
}
$(document).ready(function(){
$('[data-toggle="errortip"]').tooltip({
trigger : 'hover',
title: errorVariable
});
Start is called from a simple start button on the page. recentError is declared at the top of the .js file.
Thanks for the help!
You can set this attribute whenever you will need a new value for the tooltip:
$('#warningbtn').attr('data-original-title','something else');
There is an issue reported here, and it seems to be a problem with setting the tooltip title dynamically
https://github.com/twbs/bootstrap/issues/14769
You may use data-original-title attribute on show.bs.tooltip event:
var errorVariable = Date.now() % 100;
$(function () {
$('[data-toggle="errortip"]').tooltip({
trigger : 'hover',
title: errorVariable
}).on('show.bs.tooltip', function(e) {
$(this).attr('data-original-title', errorVariable);
});
$('#myBtn').on('click', function(e) {
errorVariable = Date.now() % 100;
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn-default btn-sm" id="myBtn">Click Me to create a random tooltip message</button>
<div id="title">App</div>
<button id="warningbtn" type="button" class="btn-default btn-sm"
data-toggle="errortip" data-placement="right" title="">
<span class="glyphicon glyphicon-warning-sign"></span>
</button>
Try this
$('#warningbtn').on('show.bs.tooltip', function() {
$('#warningbtn').tooltip({
title: errorVariable
})
});
You can use following code. I have updated according to your requirement. :
var recentError;
function start() {
var result = -1;
if (result == -1) {
recentError = "Your license is invalid.";
}
}
$(document).ready(function() {
$('[data-toggle="errortip"]').tooltip({
title : recentError
});
});
start();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<div id="title">App</div>
<button id="warningbtn" type="button" class="btn-default btn-sm"
data-toggle="errortip" data-placement="right" title="">
<span class="glyphicon glyphicon-warning-sign"></span>
</button>
Hi (and sorry if my english is not that right),
I'm trying to toggle the same popover but with 2 different links.
For example :
1st link - Popover is attached to it
2nd link - Can open the popover on the 1st link
I tried to do it :
<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a>
<div id="popover-content" class="hide">
test
</div>
<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">2nd link (open the popover on the first link)</a>
But it doesn't work, it duplicate the popover.
There is my Bootply : http://www.bootply.com/jAGRX9hm1a
Thank you
$(document).ready(function()
{
var t= $(".pop-contact").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
var shown=false;
t.on('show.bs.popover', function () {
shown=true;
});
t.on('hide.bs.popover', function () {
shown=false;
});
$('.pop-contact2').click(function(e){
e.preventDefault();
if(shown)
t.popover('hide');
else
t.popover('show');
});
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a>
<div id="popover-content" class="hide">
test
</div>
<a class="pop-contact2" type="button" id="contact">2nd link</a>
<a class="pop-contact2" type="button" id="contact">3nd link</a>
This Is actually does the same wright, the content shows on 1st link only still.
$(document).ready(function()
{
var t= $(".pop-contact").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
var shown=false;
t.on('show.bs.popover', function () {
shown=true;
});
t.on('hide.bs.popover', function () {
shown=false;
});
$('.pop-contact2').click(function(e){
e.preventDefault();
if(shown)
t.popover('hide');
else
t.popover('show');
});
});
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a>
<div id="popover-content" class="hide">
test
</div>
<a class="pop-contact2" type="button" id="contact">2nd link</a>
<a class="pop-contact2" type="button" id="contact">3nd link</a>
Im trying to write function that when you click on a button, textarea is adding in the bottom of my popover content.
the problem is that when the textarea is shown the popover extend down and hides the text.
i want the popover extend only up (save the bottom placement and the original width)
help?
here is my code:
html:
<div class="popover-markup">
<a href="#" class="trigger">
This link triggers the popover.
</a>
<span class="content hide">
<p>This is the popover content.
</p>
<button id="clickme" onclick="showText()">click me</button>
<textarea class="textarea"></textarea>
</span>
</div>
js:
$(document).ready(function () {
$('.popover-markup > .trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
},
container: 'body',
placement: 'top',
html: true
});
$('.textarea').hide();
});
function showText() {
$('.textarea').show();
};
I made a nasty hack where the content is replaced just in time for the popover to calculate a new correct position when invoked again.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.container {
margin-top: 200px;
}
</style>
</head>
<body>
<div class="container">
<button id="my-show-popover" type="button" class="btn btn-default" data-container=".container" data-toggle="popover"
data-placement="top" data-html="true" data-trigger="manual">
Popover on top
</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function () {
var popoverNoTextAreaContent = "Nasty hobbitses. <button type='button' id='my-show-text-area-button' class='btn btn-default'>Click</button>",
popoverWithTextAreaContent = popoverNoTextAreaContent + "<textarea></textarea>";
$('#my-show-popover').click(function () {
$(this).attr('data-content', popoverNoTextAreaContent).popover('show');
});
$(document).on('click', '#my-show-text-area-button', function () {
$('#my-show-popover').attr('data-content', popoverWithTextAreaContent).popover('show');
});
});
</script>
</body>