25

I am using an input group textbox and I need the Bootstrap 3 popover to work and the popover template should be defined &n designed by me. So the html I have currently with me is :

<div class="row">
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control jq-timePicker" value="09:30">
                <span class="input-group-addon" rel="popover">
                    <span class="glyphicon glyphicon-time"></span>
                </span>
            </div>
        </div>
</div>

I want a popover to open when the input group icon is click. In this case when the span with class glyphicon-time is clicked a popover is or displayed with the following HTML:

<div class="timePickerWrapper popover">
            <div class="arrow"></div>
            <div class="popover-content">
                <div class="timePickerCanvas"></div>
                <div class="timePickerClock timePickerHours"></div>
                <div class="timePickerClock timePickerMinutes"></div>
            </div>
        </div>

JS written:

$(document).ready(function () {
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
        '<div class="arrow"></div>',
        '<div class="popover-content">',
        '<div class="timePickerCanvas"></div>',
        '<div class="timePickerClock timePickerHours"></div>',
        '<div class="timePickerClock timePickerMinutes"></div>',
        '</div>',
        '</div>'].join('');


    $('body').popover({
        selector: '[rel=popover]',
        trigger: 'click',
        template: popoverTemplate,
        placement: "bottom",
        html: true
    });
});

See the fiddle here: http://www.bootply.com/4fMzxGRpik

Can anyone please help me correcting what mistake I am doing and what needs to be done to display a popvhover.

4 Answers 4

29

you are missing the content of the popover, you'll need something like this

$(document).ready(function () {
    var popoverTemplate = ['<div class="timePickerWrapper popover">',
        '<div class="arrow"></div>',
        '<div class="popover-content">',
        '</div>',
        '</div>'].join('');

    var content = ['<div class="timePickerCanvas">asfaf asfsadf</div>',
        '<div class="timePickerClock timePickerHours">asdf asdfasf</div>',
        '<div class="timePickerClock timePickerMinutes"> asfa </div>', ].join('');


    $('body').popover({
        selector: '[rel=popover]',
        trigger: 'click',
        content: content,
        template: popoverTemplate,
        placement: "bottom",
        html: true
    });
});

Working demo

1
  • 1
    Docs are unobvious about this. Thanks! Dec 2, 2018 at 21:42
8

I would prefer to have all the HTML in templates. It goes like this:

Something in Javascript

$(".btn").popover({
   template: $("#selector").html(),
   placement: "auto"
});

And in HTML

<div id="selector">
    Anything you want in your popovers, either dynamic or static
<div>
2

@code-jaff that is a great answer, but i noticed that the Working Demo's popover doesn't look like it's coming out of the button. If this is happening to anyone else, try adding container: 'body' to the popover options. Like this:

$('body').popover({
    selector: '[rel=popover]',
    trigger: 'click',
    content: content,
    template: popoverTemplate,
    placement: "bottom",
    html: true,
    container: 'body'
});
0

What I want to try is a minimal configuration and don't want to split code into JS and HTML, And here is my solution.

Here what I found,

Bootstrap Version 4.5.2 Added popper js

Put your code in the data-content attribute.

Here is my HTML code

<a tabindex="0" html="true" class="btn btn-sm" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And heres some <b>amazing content</b>. Its very engaging. Right?">Dismissible popover</a>

Here is my JS code

 $('[data-toggle="popover"]').popover({
    html : true
 });   

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.