0

I'm trying to write a mathematical formula on a bootstrap popover:

<div class="row">
<div class="col-xs-3 col-sm-push-2 innerBox">
    <div>
        <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" 
        title="Resultat:" data-content="$x^2+1$">Click to toggle popover</button>
    </div>
</div>
</div>

But it doesn't work. I added a script (really not knowing what was I doing):

<script>
    $(function () {
        $('[data-toggle="popover"]').popover()
        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
    })
</script>

And it doesn't works. Curiosly it works once in a hundred times and I don't know why. I'm searching forums but there are not very much information. What can I do? Thank you for your time and willilngness!

DaniDaniels
  • 1
  • 2
  • What are you trying to do ?? Run a function on open event ? – BENARD Patrick Jul 15 '16 at 12:00
  • In this example data-content="x^2+1$" is suposed to transform x^2+1 in a nice mathematic expression. In fact instead of this expression I'm putting a random polynomial made with php, but it does'nt matter. With x^2+1 it does'nt work. – DaniDaniels Jul 15 '16 at 22:00
  • Bootstraps popover method is asynchronous so the typeset call to MathJax will execute before the popover has been created, and it fizzles since the mathematical expression is not yet in the DOM. IIRC the specifics differ between bootstrap versions but SO has many posts on bootstrap popover callbacks so I'd suggest to look at these first, e.g. http://stackoverflow.com/questions/36546217/using-bootstrap-popover-callback – Peter Krautzberger Jul 17 '16 at 09:45

0 Answers0