Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>First of all, if you want to use HTML inside the content you need to set the HTML option to true:</p> <pre><code>$('.danger').popover({ html : true}); </code></pre> <p>Then you have two options to set the content for a Popover</p> <ul> <li>Use the data-content attribute. This is the default option.</li> <li>Use a custom JS function which returns the HTML content.</li> </ul> <p><strong>Using data-content</strong>: You need to escape the HTML content, something like this:</p> <pre class="lang-html prettyprint-override"><code>&lt;a class='danger' data-placement='above' data-content="&amp;lt;div&amp;gt;This is your div content&amp;lt;/div&amp;gt;" title="Title" href='#'&gt;Click&lt;/a&gt; </code></pre> <p>You can either escape the HTML manually or use a function. I don't know about PHP but in Rails we use *html_safe*.</p> <p><strong>Using a JS function</strong>: If you do this, you have several options. The easiest I think is to put your div content hidden wherever you want and then write a function to pass its content to popover. Something like this:</p> <pre class="lang-js prettyprint-override"><code>$(document).ready(function(){ $('.danger').popover({ html : true, content: function() { return $('#popover_content_wrapper').html(); } }); }); </code></pre> <p>And then your HTML looks like this:</p> <pre class="lang-html prettyprint-override"><code>&lt;a class='danger' data-placement='above' title="Popover Title" href='#'&gt;Click&lt;/a&gt; &lt;div id="popover_content_wrapper" style="display: none"&gt; &lt;div&gt;This is your div content&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Hope it helps!</p> <p>PS: I've had some troubles when using popover and not setting the title attribute... so, remember to always set the title.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload