Contain form within a bootstrap popover

Question

lt div class  quot container quot  gt       lt div class  quot row quot  style  quot padding-top  240px  quot  gt           lt a href  quot   quot  class  quot btn btn-large btn-primary quot  rel  quot popover quot              data-content  quot  lt form gt  lt input type  quot text quot   gt  lt  form gt  quot              data-placement  quot top quot  data-original-title  quot Fill in form quot  gt Open form lt  a gt       lt  div gt   lt  div gt   JSfiddle I m guessing that I would store the form contents within a javascript function    How do I contain a form within a bootstrap popover

User · Answer

I would put my form into the markup and not into some data tag. This is how it could work:

JS Code:

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

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">
  <!-- MyForm -->
</div>

Demo

Alternative Approaches:

X-Editable

You might want to take a look at X-Editable. A library that allows you to create editable elements on your page based on popovers.

X-Editable demo

Webcomponents

Mike Costello has released Bootstrap Web Components. This nifty library has a Popovers Component that lets you embed the form as markup:

<button id="popover-target" data-original-title="MyTitle" title="">Popover</button>

<bs-popover title="Popover with Title" for="popover-target">
  <!-- MyForm -->
</bs-popover>

Demo

User · Answer

I work in WordPress a lot so use PHP   My method is to contain my HTML in a PHP Variable  and then echo the variable in data-content    my-data-content     lt form gt  lt input type  text   gt  lt  form gt      along with  data-content   lt  php echo  my-data-content    gt

User · Answer

Either replace double quotes around type  text  with single quotes  Like    lt form gt  lt input type  text   gt  lt  form gt     OR  replace double quotes wrapping data-content with singe quotes  Like  data-content   lt form gt  lt input type  text   gt  lt  form gt

User · Answer

A complete solution for anyone that might need it  I ve used this with good results so far  JS       btn-popover-container   each function         var btn     this  children   popover-btn        var titleContainer     this  children   btn-popover-title        var contentContainer     this  children   btn-popover-content         var title     titleContainer  html        var content     contentContainer  html           btn  popover           html  true          title  title          content  content          placement   right                HTML    lt div class  btn-popover-container  gt       lt button type  button  class  btn btn-link popover-btn  gt Button Name lt  button gt       lt div class  btn-popover-title  gt          Popover Title      lt  div gt       lt div class  btn-popover-content  gt           lt form gt            Or Other content            lt  form gt       lt  div gt   lt  div gt    CSS    btn-popover-container       display  inline-block       btn-popover-container  btn-popover-title   btn-popover-container  btn-popover-content       display  none

User · Answer

lt a data-title  A Title  data-placement  top  data-html  true  data-content   lt form gt  lt input type  text   gt  lt  form gt   data-trigger  hover  rel  popover  class  btn btn-primary  id  test  gt Top popover lt  a gt       just state data-html  true

User · Answer

like this Working demo http   jsfiddle net 7e2XU 21 show     Update  http   jsfiddle net kz5kjmbt      lt div class  container  gt       lt div class  row  style  padding-top  240px   gt   lt a href     class  btn btn-large btn-primary  rel  popover  data-content    lt form id  mainForm  name  mainForm  method  post  action    gt       lt p gt           lt label gt Name   lt  label gt           lt input type  text  id  txtName  name  txtName    gt       lt  p gt       lt p gt           lt label gt Address 1   lt  label gt           lt input type  text  id  txtAddress  name  txtAddress    gt       lt  p gt       lt p gt           lt label gt City   lt  label gt           lt input type  text  id  txtCity  name  txtCity    gt       lt  p gt       lt p gt           lt input type  submit  name  Submit  value  Submit    gt       lt  p gt   lt  form gt   data-placement  top  data-original-title  Fill in form  gt Open form lt  a gt        lt  div gt   lt  div gt    JavaScript code          a rel popover    popover         html   true         placement   right           ScreenShot

User · Answer

Or try this one  Second one including second hidden div content to hold the form working and test on fiddle http   jsfiddle net 7e2XU 21    lt link href  http   twitter github com bootstrap assets css bootstrap css  rel  stylesheet  gt   lt script src  https   ajax googleapis com ajax libs jquery 1 8 2 jquery min js  gt      lt script src  http   twitter github com bootstrap assets js bootstrap-tooltip js  gt  lt  script gt       lt script src  http   twitter github com bootstrap assets js bootstrap-popover js  gt  lt  script gt     lt div id  popover-content  style  display  none   gt       lt div class  container  style  margin  25px    gt       lt div class  row  style  padding-top  240px   gt           lt label id  sample  gt               lt form id  mainForm  name  mainForm  method  post  action    gt       lt p gt           lt label gt Name   lt  label gt           lt input type  text  id  txtName  name  txtName    gt       lt  p gt       lt p gt           lt label gt Address 1   lt  label gt           lt input type  text  id  txtAddress  name  txtAddress    gt       lt  p gt       lt p gt           lt label gt City   lt  label gt           lt input type  text  id  txtCity  name  txtCity    gt       lt  p gt       lt p gt           lt input type  submit  name  Submit  value  Submit    gt       lt  p gt   lt  form gt            lt  label gt       lt  div gt             lt  div gt    lt  div gt     lt a href     style  margin  40px 40px   class  btn btn-large btn-primary  rel  popover  data-content    data-placement  left  data-original-title  Fill in form  gt Open form lt  a gt     lt script gt      a rel popover    popover       html   true   placement   right   content   function         return     popover-content   html             lt  script gt

User · Answer

You can load the form from a hidden div element with the Bootstrap-provided hidden class    lt button class  btn btn-default  id  form-popover  gt Form popover lt  button gt    lt div class  hidden  gt     lt form id  form  gt       lt input type  text  class  form-control    gt     lt  form gt   lt  div gt    JavaScript       form-popover   popover       content      form   parent   html        html  true

[javascript] Contain form within a bootstrap popover?

JS Code:

HTML Markup:

Alternative Approaches:

X-Editable

Webcomponents

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to popover