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!
Related
I'm using this https://github.com/amitava82/angular-multiselect multiselect dropdown for my project.
In my html:
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="nameList.name"
options="name as name.key for name in nameList"
multiple="true"
</am-multiselect>
This dropdown has a "checkall" and "uncheckall" button in the dropdown, which I WANT to remove, while keeping the functionality of the multi-select.
This is the html in the directive the guy uses:
src/multiselect.tmpl.html
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="toggleSelect()" ng-disabled="disabled" ng-class="{'error': !valid()}">
{{header}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<input class="form-control input-sm" type="text" ng-model="searchText.label" ng-keydown="keydown($event)" autofocus="autofocus" placeholder="Filter" />
</li>
<li ng-show="multiple" role="presentation" class="">
<button class="btn btn-link btn-xs" ng-click="checkAll()" type="button"><i class="glyphicon glyphicon-ok"></i> Check all</button>
<button class="btn btn-link btn-xs" ng-click="uncheckAll()" type="button"><i class="glyphicon glyphicon-remove"></i> Uncheck all</button>
</li>
<li ng-repeat="i in items | filter:searchText" ng-class="{'selected': $index === selectedIndex}">
<a ng-click="select(i); focus()">
<i class='glyphicon' ng-class="{'glyphicon-ok': i.checked, 'empty': !i.checked}"></i> {{i.label}}</a>
</li>
</ul>
</div>
I wan't to just remove/override the checkall and uncheckall buttons WITHOUT editing this library's directive. I can override the CSS in my personal file.css, but how do I override the HTML template he uses. Thanks
I see 3 ways you could do it:
Add your own template to replace this one like this (reference):
<script type="text/ng-template" id="multiselect.tmpl.html">
html template without buttons here
</script>
The potential issue with this is that you would be overriding this template everywhere it's used. But maybe you are using this in a bunch of places and that makes sense.
Add a decorator to the directive that removes the part of the template you don't want during the compile phase and allows the rest of the directive to perform as usual:
decorator('amMultiselectPopupDirective' ['$delegate', function($delegate) {
var directive = $delegate[0];
var compile = directive.compile;
directive.compile = function(tElement, tAttrs) {
var link = compile.apply(this, arguments);
if (tAttrs.disableCheckAll) {
tElement.find('li[ng-show="multiple"]').remove();
// this code could be different, but the gist is that it would remove or hide the stuff you don't want
}
return function() {
link.apply(this, arguments);
};
};
return $delegate;
}]);
The potential issue here is that you would be changing the template for this directive everywhere the directive is used. That's why in my example I made the template change conditional based on some attribute you could define, like disableCheckAll.
Use template-url attribute that is already defined for this directive and create your own template that doesn't have these buttons:
<script type="text/ng-template" id="yourowntemplate.html">
html template without buttons here
</script>
<am-multiselect ...
template-url="yourowntemplate.html">
</am-multiselect>
I would say 3 is probably the best way to do it. But 1 could work better if you wanted to override the default, and then you wouldn't have to pass in the template-url everytime you use the am-multiselect directive.
Edit: Here is a working example for 3: http://plnkr.co/edit/m0lZSHUJ8MHslqCNPnCc?p=info
Overlap his directive with your own div with class: "no-btns"
Add this css:
.no-btns .dropdown-menu li:nth-child(2) {display:none;}
Example:
<style>
.no-btns .dropdown-menu li:nth-child(2) {
display:none;
}
</style>
<div class="no-btns">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="nameList.name"
options="name as name.key for name in nameList"
multiple="true"
</am-multiselect>
</div>
I have a problem assigning a tooltip to a glyphicon.
I had a look at this JSFiddle, but it is not applicable for my case since I am using jQuery to create the HTML elements like this:
var trashIcon = $('<i>').addClass('glyphicon glyphicon-trash');
Now I want to wrap the following code to match the JSFiddle link... but how can I do this?
var trashToolTip = $('<a>').addClass=('my-tool-tip').attr({ data-toggle:"tooltip" data-placement:"left" title:"Delete" });
CSS:
a.my-tool-tip, a.my-tool-tip:hover, a.my-tool-tip:visited {
color: black;
}
EDIT:
As seen in the JSFiddle link:
The class CANNOT be tooltip...
var trashIcon looks like this in when parsed into HTML:
`<i class='glyphicon glyphicon-trash'></i>`
I want the HTML version of var trashToolTip, which is the following, to be parent (better term?):
<a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="delete"></a>
So that it should look like the following code:
<a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="delete">
<i class='glyphicon glyphicon-trash'></i>
</a>
You can use jQuery's wrap function to achieve that HTML structure. You'd use it like:
trashIcon.wrap(trashToolTip);
Is it possible to have a custom bootstrap popover?
I mean I want to be able to use
$('#example').popover(options)
So on click of an element #example, I'll pass some text (which would be shown in editable textarea);
I am using bootstrap 2.3.2
I dont think the links in the comments completely answers the question. Here is a 2.3.2 example, working with multiple links / elements, that passes text() from the element to a textarea on the popover, and back to the element upon "submit" :
awesome user
Use popovers template feature to customize the popover (adding buttons), set a <textarea> as content, inject the text of the link / element to the textarea on the shown event :
$("[rel=comments]").popover({
trigger : 'click',
placement : 'top',
html: 'true',
content : '<textarea class="popover-textarea"></textarea>',
template: '<div class="popover"><div class="arrow"></div>'+
'<h3 class="popover-title"></h3><div class="popover-content">'+
'</div><div class="popover-footer"><button type="button" class="btn btn-primary popover-submit">'+
'<i class="icon-ok icon-white"></i></button> '+
'<button type="button" class="btn btn-default popover-cancel">'+
'<i class="icon-remove"></i></button></div></div>'
})
.on('shown', function() {
//hide any visible comment-popover
$("[rel=comments]").not(this).popover('hide');
var $this = $(this);
//attach link text
$('.popover-textarea').val($this.text()).focus();
//close on cancel
$('.popover-cancel').click(function() {
$this.popover('hide');
});
//update link text on submit
$('.popover-submit').click(function() {
$this.text($('.popover-textarea').val());
$this.popover('hide');
});
});
see fiddle -> http://jsfiddle.net/e4zMu/ here with three editable links / elements :
In the event you want to use RAZOR or HTML actually be used as the template for the popover (rather than injecting it through the attribute in JS):
In the following example, we were building a bootstrap Breadcrumb control with a popover that contained a list of values that might be selected to change the value of a breadcrumb.
we were using razor to create the HTML TEMLPLATE for the popover-content.
This is how the popover used HTML for its 'content':
<script type='text/javascript'>
$(function () {
$('a[data-toggle="popover"]').popover({
html: true,
content: function () {
return $($(this).data('contentwrapper')).html();
}
});
});
</script>
What this did was for the content attribute, we used jquery to search for a data-contentwrapper within this breadcrumb.
We used Razor to create each breadcrumb element (using orderlist / listitem) and a div containing the proper id to be used in our data-toggle.
<ol class="breadcrumb">
#foreach (var segment in Model.Segments)
{
var selectedChild = segment.SelectedChild;
var popoverId = segment.Id + "_breadcrumb_popover";
var longCaption = segment.Caption;
var shortCaption = segment.Id;
var childType = segment.ChildType;
if (segment.SelectedChild != null)
{
shortCaption = segment.SelectedChild.Id;
}
else
{
// if the selected child is null, then we want the text to show 'select ' _grandchildType is
shortCaption = string.Format("Select {0} ?", segment.ChildType);
}
var listItemClassString = (segment.Children.Any()) ? "" : "hidden";
<!-- THIS IS THE BREADCRUMB ELEMENT -->
<li class="#listItemClassString">
<small>#childType</small>
<a href="javascript: void(0)" tabindex="0" rel="popover" data-container="body"
data-html="true" data-toggle="popover" data-placement="bottom"
data-animation="true" data-trigger="focus" title="Choose #childType" data-contentwrapper="##popoverId" >#shortCaption</a>
<i class="glyphicon glyphicon-chevron-right"></i>
</li>
<!-- THIS IS THE TEMPLATE DROPDOWNLIST FOR THe above list item -->
<div role="tooltip" title="FROM TEMPLATE" class="popover breadcrumb hidden" id="#popoverId">
<div class="arrow"></div>
#*<h3 class="popover-title"></h3>*#
<div class="popover-content" class='panel clearfix hidden' style='padding-right: 10px;'>
<ul class="list-group">
#foreach (var option in segment.Children)
{
<li class="list-group-item">
#{
var url = new UrlHelper(ViewContext.RequestContext, RouteTable.Routes).RouteUrl("DefaultWithBreadcrumb",
new
{
action = parentRouteData.Values["action"] as String,
controller = parentRouteData.Values["controller"] as String,
breadcrumbPath = option.Url
});
}
#option.Caption
</li>
<!-- class='col-md-3 col-sm-4'-->
}
#{ tabIndex++;}
</ul>
</div>
</div>
}
</ol>
Hope this helps someone who would like to combine serverside MVC with clientside bootstrap popover html content.
I have an html element which is using bootstrap tooltip to show a title when hovering over it. However, when you click this element I'm changing the tooltip, but the new tooltip isn't showing until I remove the mouse from it and re-hover over the element again.
I want the tooltip to be shown instantly when said button is clicked. How can I achieve this? Is there a way to "refresh", in lack of better words, an html element?
try this way
Demo :
http://jsfiddle.net/dreamweiver/9z404crn/
$(document).ready(function() {
$('#example').tooltip();
$('#example').on('click', function() {
$(this).attr('data-original-title', 'changed tooltip');
$('#example').tooltip();
$(this).mouseover();
});
});
h3 {
margin-top: 50px;
}
<h3>
Sensors Permissions
<i class="icon-info-sign" data-toggle="tooltip" title="first tooltip" id='example'></i>
</h3>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
Note:
Above logic works only with Bootstrap version 2.3.2 and below, however, the solution provided by #NabiK.A.Z's would work with the latest versions of Bootstrap lib.
Happy Coding:)
You can use this code:
var newTooltip = 'Changed this tooltip!';
$('#example').attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
I test it with bootstrap 3.3.4
You can see it here:
http://jsfiddle.net/NabiKAZ/a4WwQ/1029/
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'bottom',
});
$('.mytooltip').hover(function() {
$('.mytooltip').tooltip('show');
});
$('.mytooltip').click(function() {
var newTooltip = 'Changed this tooltip!';
$(this).attr('data-original-title', newTooltip).parent().find('.tooltip-inner').html(newTooltip);
});
.cart {
overflow: hidden;
padding: 10px 3px;
background: yellow;
}
<div class="cart">
<a data-toggle="tooltip" title="add to cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<br>
<div>
<a data-toggle="tooltip" title="add to another cart" class="mytooltip">
<i class="icon-shopping-cart"></i>
</a>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/19630749/1366033'>How to make bootstrap 3 tooltip work with parent div with overflow:hidden?</a><br/> Find documentation: <a href='http://getbootstrap.com/javascript/#tooltips'>Bootstrap 3.0 ToolTips</a><br/> Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
For me in bootstrap 4 this worked:
$("#xxx").tooltip("dispose").attr("title", "New Tooltip").tooltip()
It's 2021 and with Bootstrap 5(BS5) all answers on this here didn't help me. Most answers above updated the content of the $(element).parent().find('.tooltip-inner').html("This is a test"); generated by the tooltip plugin. However with BS5 the generated template for the tooltip has a unique ID which can be used to update the tooltip.
This example demonstrates a simple scenario: when the .copy_queue_id div is clicked, queue ID from its attribute is copied and hence the the tooltip is updated to notify the user
HTML Markup:
<div class="cursor-pointer text-primary copy_queue_id" data-queueid="123456" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Click to copy"> 123456</small>
JS - JQuery
$(document).on('click', '.copy_queue_id', function(){
let node = $(this);
let id = node.data('queueid');
navigator.clipboard.writeText(id);
let tooltipid = node.attr('aria-describedby');
$("#"+tooltipid).find('.tooltip-inner').html('ID Copied!!');
})
Tested & works in BS5
Hope this helps others :)
Sure you just have to change the tooltips text within the onclick event
$('.tooltip-inner').html("This is a test");
I've created a jsfiddle for you as a demonstration http://jsfiddle.net/a4WwQ/59/
Currently it will change all visible tooltips text which isnt really a problem since you arent going to show more than one at at a time. That being said, you should consider modifying the code to point to the closest tooltip.
hope it helps!
in case you are looking to refresh the contents;
$('#example').tooltipster('content', 'i am superman!');
2021, Bootstrap 5: update this property data-bs-original-title.
You can also use Razor / Blazor with this, like this:
var title = propExamples.FirstOrDefault(q => q.Key == selectedType.Id).Value;
<div class="col-sm-2">
<img class="zoom-on-hover cursor-pointer fit-image grayout"
src="/lib/bootstrap-icons-1.5.0/info-lg.svg"
data-bs-toggle="tooltip" data-placement="bottom"
data-bs-original-title="#title" />
</div>
This solution is ok for one button cases: Is it possible to use a div as content for Twitter's Popover
But in my page I have a bunch of popovers (say 50-100).
So I need to modify this solution.
This wa #jävi's solution:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
Each of my button has its own id.
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div1" style="display: none">
<div>This is your div content</div>
</div>
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div2" style="display: none">
<div>This is your div content</div>
</div>
So how can I rewrite this javascript code snippet to cover all my buttons?
Just fought with this myself. You need to put the id in the element that triggers the popover. Use a custom data attribute like so (called 'data-id'):
<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a>
Then you can modify your javascript slightly to grab the data-id attribute value programmatically:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $($(this).attr('data-id')).html();
}
});
});
If you don't want to pollute your source element with another data-* attribute, here is a simple and generic way to use the data-content attribute as text or CSS selector:
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
var content = $(this).data('content');
try { content = $(content).html() } catch(e) {/* Ignore */}
return content;
}
});
You can now use the data-content attribute with a text value:
<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-large" href="#">Click to toggle popover</a>
...or use the data-content attribute with a CSS selector value:
<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-large" href="#">Click to toggle popover</a>
<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div>
You can test this solution here: http://jsfiddle.net/almeidap/eX2qd/
...or here, if you are using Bootstrap 3.0: http://jsfiddle.net/almeidap/UvEQd/ (note the data-content-target attribute name!)
You can do it without additional button attributes like this:
http://jsfiddle.net/isherwood/E5Ly5/
.popper-content {
display: none;
}
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My first popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My second popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My third popover content goes here.</div>
$('.popper').popover({
container: 'body',
html: true,
content: function () {
return $(this).next('.pop-content').html();
}
});
Store the id of the div containing the popover html inside the rel attribute of the a element
<a rel="popover_div2" ... >click</a>
And then get the rel of the click anchor inside your click listener (not sure how the popover method stores it, but I'm sure it does):
var myRel = $(this).attr(rel);
return $(myRel).html();
For me it has do be
data-id="#popover_div1"
in the HTML for the button (with a # for addressing the id of the div).