I am trying to display HTML inside a bootstrap popover, but somehow it's not working. I found some answers here but it won't work for me. Please let me know if I'm doing something wrong.
<script>
$(function(){
$('[rel=popover]').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
</script>
<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title">
popover
</li>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
You cannot use <li href="#" since it belongs to <a href="#" that's why it wasn't working, change it and it's all good.
Here is working JSFiddle which shows you how to create bootstrap popover.
Relevant parts of the code is below:
HTML:
<!--
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
class="btn btn-lg btn-primary"
role="button"
data-html="true"
data-toggle="popover"
data-trigger="focus"
title="<b>Example popover</b> - title"
data-content="<div><b>Example popover</b> - content</div>">Example popover</a>
JavaScript:
$(function(){
// Enables popover
$("[data-toggle=popover]").popover();
});
And by the way, you always need at least $("[data-toggle=popover]").popover(); to enable the popover. But in place of data-toggle="popover" you can also use id="my-popover" or class="my-popover". Just remember to enable them using e.g: $("#my-popover").popover(); in those cases.
Here is the link to the complete spec:
Bootstrap Popover
Bonus:
If for some reason you don't like or cannot read content of a popup from the data-content and title tags. You can also use e.g. hidden divs and a bit more JavaScript. Here is an example about that.
you can use attribute data-html="true":
<a href="#" id="example" rel="popover"
data-content="<div>This <b>is</b> your div content</div>"
data-html="true" data-original-title="A Title">popover</a>
Another way to specify the popover content in a reusable way is to create a new data attribute like data-popover-content and use it like this:
HTML:
<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>
JS:
$(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 can be useful when you have a lot of html to place into your popovers.
Here is an example fiddle: http://jsfiddle.net/z824fn6b/
You need to create a popover instance that has the html option enabled (place this in your javascript file after the popover JS code):
$('.popover-with-html').popover({ html : true });
I used a pop over inside a list, Im giving an example via HTML
<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>
You only need put data-html="true" in the link popover. Is gonna work.
This is an old question, but this is another way, using jQuery to reuse the popover and to keep using the original bootstrap data attributes to make it more semantic:
The link
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
Show it!
</a>
Custom content to show
<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
<ul class="nav nav-pills nav-stacked">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
Javascript
$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
});
Fiddle with complete example:
http://jsfiddle.net/tomsarduy/262w45L5/
This is a slight modification on Jack's excellent answer.
The following makes sure simple popovers, without HTML content, remain unaffected.
JavaScript:
$(function(){
$('[data-toggle=popover]:not([data-popover-content])').popover();
$('[data-toggle=popover][data-popover-content]').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();
}
});
});
On the latest version of bootstrap 4.6, you might also need to use sanitize:false for adding complex html.
$('.popover-with-html').popover({ html : true, sanitize : false })
I really hate to put long HTML inside of the attribute, here is my solution, clear and simple (replace ? with whatever you want):
<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
<h2>Some title</h2>
Some text
</a>
then
var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
You can change the 'template/popover/popover.html' in file 'ui-bootstrap-tpls-0.11.0.js'
Write: "bind-html-unsafe" instead of "ng-bind"
It will show all popover with html.
*its unsafe html. Use only if you trust the html.
For Bootstrap >= 5.2
To enable HTML content in Popovers: data-bs-html="true"
Example:
<a href="#"
data-bs-toggle="popover"
data-bs-title="A Title"
data-bs-html="true"
data-bs-content="This is <strong>bold</strong>">popover</a>
Doc: https://getbootstrap.com/docs/5.3/components/popovers/#options
You can use the popover event, and control the width by attribute 'data-width'
$('[data-toggle="popover-huongdan"]').popover({ html: true });
$('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () {
var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width"));
$("div[id^=popover]").css("max-width", width);
});
<a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code">
<i class="far fa-question-circle"></i>
</a>
Actually if you're using Bootstrap5 with Django then their method of passing in content as a string is perfect and in line with Django's template inclusion. You can create a template file with whatever partial HTML that you need, so for example, there is not X-editable for Bootstrap5 that seems to work, so maybe you'd want to make a line edit together with Ok|Cancel buttons as content. Anyway, this is what I mean:
<button data-bs-content="{% include './popover_content.html' %}" type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" >
Click to toggle popover
</button>
Where my settings.py templates section looks like this:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'],
'APP_DIRS': True, # True is necessary for django-bootstrap5 to work!
'OPTIONS': {
'debug': True,
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
I keep my templates (of every single app) in a <project dir>/templates/<app name> folder. I have MyMainApp/popover_content.html right beside MyMainApp/home.html wher the above example code was tested. But if you keep your templates in each app's Django folder, then you'll need to add "MyApp/templates" to the TEMPLATES[0]{'DIRS': ['MyApp/templates', 'MyApp2/templates']} list.
So at least this will give you the ability to put your popover HTML in the usual, syntax-highlighted Django template format, and makes good use of modularizaton of your Django template into components.
I'm personally going to use it to make an editable label (title and description fields of some data in my app).
One drawback is that if you use doublequotes (") when including: "{% include './popover_content.html' %}", then you must use single quotes all throughout the popover_content.html` template.
You also need to enable html for popovers, so your site-wide popover initializer would go:
<script type="text/javascript">
$(document).ready(() => {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(
function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
html: true,
});
});
});
</script>
Here is the (unstyled) result. In conclusion, use the default-provided string method of passing in, and pass in an included Django template file. Problem solved!
How to show / hide edit icon on mouseover and mouseout on particular text.
Here is my html code snippet
<ul>
<li>
<a id="pop" href="javascript:;;" data-content="test Desc" data-id="123">
<span class="testNameInfo">Test</span>
</a>
<div class="pull-right icons-align">
<i class="fa fa-pencil"></i>..
<i class="fa fa-plus"></i>
<i class="fa fa-times"></i>
</div>
</li>
</ul>
when page loads the fa-pencil icon is in hide state. When i mouse over on text, it should show fa-pencil icon. Remaining icons (add and delete) are always in show state.
Here is my javascript to hide the fa-pencil icon
$("a.editInline").css("display","none");
Am using backbone and marionette js frameworks, so i need to register the events in view.
Please let me know what is the best way to get out from my issue.
You can do as below:
$('.testNameInfo').on('mouseover mouseout',function(){
$(this).closest('li').find('.editInline').toggle();
//find the closest li and find its children with class editInLine and
//toggle its display using 'toggle()'
});
UPDATE
DEMO
#JamieBarker made his point which is valid here so I would suggest to try below code instead
$("a.editInline").css("display","none");
$('li').on('mouseover mouseout',function(){
$(this).find('.editInline').toggle();
//find its children with class .editInLine and
//toggle its display using 'toggle()'
});
Better to use CSS than JavaScript if you can:
a.editInline {
display:none;
}
li:hover a.editInline {
display:inline-block;
}
UPDATE
Performance/Simplicity wise I'd advise going with the CSS solution provided. If all else you can use then JS solution.
Optional CSS Solution
.editInline {
display: none;
}
#pop:hover .icons-align .editInline {
display: inline-block;
}
JS Solution
$(function() {
$(".editInline").hide(); // Use this if CSS is not wanted
$("#pop").hover(function() {
$(".editInline").show();
}, function() {
$(".editInline").hide();
});
});
What do I need:
I need to have something like "toggling of images" using the functions to add & remove classes in jquery.
JavaScript code
$('.hover12').click(function () {
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
});
HTML code
<a href="javascript:void(0);" class="hover12">
<i class="fa fa-star-o favourate_dextop" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
</a>
Problem:
On the first click, remove class works fine and add class to that particular class.
Then I have a problem on the second click, neither remove or add class works.
o/p on first toggle
<i class="fa favourate_dextop fa-star orange12" title="Add to Favorites" id="fav13039" data-sess_id="13039" data-name="MAGIC" data-city="Las Vegas" data-country="United States Of America" data-event_url="magic"></i>
The solution I found:
$('.hover12').click(function () {
$('.fa-star').removeClass('fa-star orange12').addClass('fa-star-o');
});
Change this
$('.fa-star-o').RemoveClass...
to this
$(this).find('i').RemoveClass...
try this:
$('.hover12').click(function()
{
$(this).find('.fa').toggleClass('fa-star-o').toggleClass('fa-star orange12');
});
The selector fails for .fa-star-o class the second time because there is no class like that since it was removed on the first click.
$('.hover12').click(function(e){
e.preventDefault();
if($('.hover12 i').hasClass('fa-star-o')){
$('.fa-star-o').removeClass('fa-star-o').addClass('fa-star orange12');
}else if($('.hover12 i').hasClass('fa-star'){
$('.fa-star-o').removeClass('fa-star orange12').addClass('fa-star-o');
}
});
This is one ugly solution though!
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content="
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
"><span class="glyphicon glyphicon-plus"></span> Dsitricts <span id="district_bracket" style="display:none;">[<span id="count_districts_">0</span>]</span></button>
and JavaScript function
function ChangeDistrictSelection(id)
{
$('#id_district_'+id).addClass("selected");
}
When I'm clicked to District123, my JavaScript add Class "active"... But, after that when action popover on show, popover reset my class :(
What ever your selected css is you have to mark it with !important in order to override existing one.
Example
.selected {
background-color:gray !important;
}
Your question is not clear much. Please explain it we can help you so.
And also please not this also.
You are passing '100' to the function using onclick and then you are trying to get the element by id. But is already is equal to the id.
WHY??
You are doing wrong here. See your codes.
<a id='id_district_100' href='#' onclick='ChangeDistrictSelection("100");'>District123</a>
and you function also have a look
function ChangeDistrictSelection(id) {
//id will be 100 as your code.
//again you are trying to get the element by id. see your html <a id="id_district_100">
//It's already equal to $('#id_district_'+100) - why do you passing that 100 and trying to get element by id??
$('#id_district_'+id).addClass("selected");
}
If you want to add the class to that element you can use this.
function ChangeDistrictSelection(id){
//alert(id);
$(id).addClass('selected');
}
In html pass like that
<a id='id_district_100' href="#" onclick='ChangeDistrictSelection(id)'>District123</a>
ok... v2
html:
<button id="search-district" type="button" class="btn btn-sm btn-success" data-toggle="popover" data-placement="bottom" title="<a href='#' class='pull-right popover-close' onclick='$("#search-district").popover("hide");'>×</a>" data-html="true" data-content=" <a id='id_district_100' href='#' onclick='ChangeDistrictSelectionCss("100");'>District123</a> ... ">
js:
function ChangeDistrictSelectionCSS(id){
$('#id_district_'+id).css("color","red");
}
It's work, but when clicked button (id="search-district") again, css color is not red
I have this HTML markup:
<a title="Hide comments" hreflang="1" class="comment-show-link" rel="tooltip" href="">Hide comments</a>
<a title="Hide comments" hreflang="2" class="comment-show-link" rel="tooltip" href="">Hide comments</a>
I'll like to change the title and HTML to "Show comments" on slideToggle but didn't know how. I write this code to show/hide a DIV:
$('.comment-show-link').click(function(e) {
$('#comment-show-'+$(this).attr("hreflang")).slideToggle('slow');
e.preventDefault();
});
But not know how to check if DIV is hidden or visible and in each case change title and HTML. Also I know that I can use text() or html() jQuery functions to achieve this but how? Any help?
Thanks in advance
Try this:
$('.comment-show-link').click(function(e) {
var $this = $(this);
var num = $this.attr('hreflang');
$('#comment-show-'+num).slideToggle('slow', function(){
if ($(this).is(':hidden')) {
// do something here
// $this.attr('...', '...')
}
});
e.preventDefault();
});