Justin Greenberg Justin Greenberg - 20 days ago 7
CSS Question

Bootstrap/HTML elements into a popover data-content="" section

I have the following code in the head of my index.PHP page..

<script>
$(function(){
$('[data-toggle=popover]').popover()
/*.click(function(e) {
e.preventDefault();
});*/‚Äč
});
</script>


And this below..

echo "<td>
<button type=\"button\"
class=\"btn btn-default\"
data-html=\"true\"
data-container=\"body\"
data-toggle=\"popover\"
data-trigger=\"focus\"
data-placement=\"top\"
data-content=\"
<div class=\"media\">
<div class=\"media-left\">
<a href=\"...\">
<img class=\"media-object\" src=\"...\" alt=\"...\">
</a>
</div>
<div class=\"media-body\">
<h4 class=\"media-heading\">Media heading</h4>
...
</div>
</div>\"
".$userFirstName."</button>";

echo
"<script>
$(function(){
$(\"[data-toggle=popover]\").popover();
});
</script></td>";


And I am trying to figure out why the stuff inside of data-content="" portion has gone into the button now instead of staying in the "pop-up part" of the bootstrap popover. I want to add some information into the popver that will be pulled from mysql database and some other formatting/HTML/bootstrap stuff if possible.

I am new to Jquery/javascript/popovers.. It is my understanding that the data-html="true" allows html to go into the popover, so am thinking it may have something to do with the fact it isn't basic HTML and is Bootstrap? Everything worked fine until I tried to put the bootstrap 'media' stuff in there.

Any help is appreciated, thanks much!

Answer

You can't have double-quotes wrapping contents with more double-quotes. In this case

data-content=\"
        <div class=\"media\">

Is being interpreted by the browser as:

data-content="<div class=" media">

because the browser can't recognize that the "inner" double-quote isn't just closing the first double-quote. There are a number of options: replace the inner " with &quot;, replace them with ' or change your approach and use JSON.

In this case, you can just use the quick and dirty:

<td>
        <button type=\"button\" 
        class=\"btn btn-default\" 
        data-html=\"true\" 
        data-container=\"body\" 
        data-toggle=\"popover\" 
        data-trigger=\"focus\" 
        data-placement=\"top\" 
        data-content=\"
        <div class='media'>
                <div class='media-left'>
                    <a href='...'>
                        <img class='media-object' src='...' alt='...'>
                    </a>
                </div>
                <div class='media-body'>
                    <h4 class='media-heading'>Media heading</h4>
                    ...
                </div>
        </div>\"
        >".$userFirstName."</button>";

Also, small note: you need a closing > on your opening <button> tag,

Comments