place a form within popover in bootstrap 3?

Question

How to place a form within popover in bootstrap 3?

<a href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click It !</a>

it gives a effect like :

I want to place a form within its body. How can we do it ?

score 20 · Accepted Answer · edited Jul 15 '15 at 11:02

20

$('#popover').popover({ 
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
});

Popover HTML Markup:

<a href="#" id="popover">the popover link</a>
<div id="popover-head" class="hide">some title</div>
<div id="popover-content" class="hide">
  <form>
    <!-- my form -->
  </form>
</div>

edited Jul 15 '15 at 11:02

Didier Ghys

30,396
9
75
81

answered Sep 09 '13 at 21:02

Ajay

4,199
4
27
47

1

Duplicate of: http://stackoverflow.com/a/12128784/1035893 – HaNdTriX May 22 '14 at 08:31

score 0 · Answer 2 · answered Sep 09 '13 at 21:06

0

I add content on popover like this:

$('#your-poped').popover({
  content: '<div id="preview"></div>',
  html: true,
  trigger: 'manual',
  delay: {'show':1000, 'hide':250},
});
$('#preview').html(yourdata);

answered Sep 09 '13 at 21:06

Zulu

8,765
9
49
56

delay showing and hiding the popover (ms) - does not apply to manual trigger type – Abbys Feb 04 '14 at 12:40

place a form within popover in bootstrap 3?

2 Answers2

Linked