Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

place a form within popover in bootstrap 3? [duplicate]

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 :

pic

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

like image 372
Rahul Avatar asked Sep 09 '13 20:09

Rahul


People also ask

How do I customize Bootstrap popover?

To create a popover, you need to add the data-bs-toggle="popover" attribute to an element. Whereas, popover's title and its content that would display upon trigger or activation can be specified using the title and data-bs-content attribute respectively. Here is the standard markup for adding a popover to a button.

What is the difference between Tooltip and popover?

Tooltip: use tooltips to show a short text to respondents when they hover over a word or icon. Popover: use popovers to show a longer text, or when you want to have a link to an external web page. It is shown when the respondent clicks on a word or icon.

How do I use Bootstrap popovers?

To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.


1 Answers

$('#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>
like image 61
Ajay Avatar answered Oct 22 '22 13:10

Ajay