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

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:

<div class="btn-popover-container">
    <button type="button" class="btn btn-link popover-btn">Button Name</button>
    <div class="btn-popover-title">
        Popover Title
    </div>
    <div class="btn-popover-content">
        <form>
          Or Other content..
        </form>
    </div>
</div>

CSS:

.btn-popover-container {
    display: inline-block;
}


.btn-popover-container .btn-popover-title, .btn-popover-container .btn-popover-content {
    display: none;
}

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    lt a href     id  popover  gt the popover link lt  a gt   lt div id  popover-head  class  hide  gt    some title  lt  div gt   lt div id  popover-content  class  hide  gt     lt  -- MyForm -- gt   lt  div gt    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     Webcomponents  Mike Costello has released Bootstrap Web Components   This nifty library has a Popovers Component that lets you embed the form as markup    lt button id  popover-target  data-original-title  MyTitle  title    gt Popover lt  button gt    lt bs-popover title  Popover with Title  for  popover-target  gt     lt  -- MyForm -- gt   lt  bs-popover gt    Demo

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

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

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

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

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

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

[javascript] Contain form within a bootstrap popover?

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to popover