CODEWITHSUNDEEP
rshinytippyjs
user51462
user51462

Reputation: 2072

R Shiny - Using MathJax with tippy.js

The app below has a tooltip that contains a mathematical expression and I was wondering if it was possible to render the expression in MathJax?

Here is the app:

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
    tippyOutput('math')
  ),
  server = function(input, output) {

    output$math = renderTippy({

      tippy("Click me!", 
            tooltip = HTML(as.character(withMathJax('$$\\frac{1}{\\pi\\gamma\\,\\left[1 +
               \\left(\\frac{x-x_0}{\\gamma}\\right)^2\\right]}\\!$$'))))


    })
  }
)

The documentation for tippy.js says that it is possible to include HTML content inside a tooltip but I can't seem to get the math expression to render correctly.

The output of withMathJax() is a list of length 3: a head tag, a character string containing the math expression and a script tag. I tried to convert it to a single character string by wrapping it in HTML(as.character(...)) but it doesn't work.

If I render the MathJax expression on its own (without a tippy) as follows:

output$trial = renderUI({
      withMathJax('$$\\frac{1}{\\pi\\gamma\\,\\left[1 +
               \\left(\\frac{x-x_0}{\\gamma}\\right)^2\\right]}\\!$$')
    })

...the output looks like this:

enter image description here

But the output of renderTippy looks very different:

enter image description here

For example, the <span class="MathJax_Preview" style="color: inherit; display: none;"></span> and <div class="MathJax_Display" style="text-align: center;">...</div> nodes are missing.

Is this due to the if (window.MathJax) MathJax.Hub.Queue(["Typeset", MathJax.Hub]); not running?

Upvotes: 1

Views: 272

Answers (1)

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84599

That does not seem possible. Here is a way to get the math expression using KaTeX:

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
    tags$head(
      tags$link(rel="stylesheet", 
                href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css", 
                integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ",
                crossorigin="anonymous"),
      HTML('<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>'),
      HTML('<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>'),
      HTML('
    <script>
      $(document).ready(function(){
        $("#math").on("mouseover", function(){
          setTimeout(function(){renderMathInElement(document.body, {delimiters: [{left: "$", right: "$", display: true}]});},0);
        })
      });
    </script>')
    ),
    tippyOutput('math'),
  ),

  server = function(input, output) {

    output$math = renderTippy({

      tippy('Click me!', 
            tooltip = '$\\frac{1}{\\pi\\gamma\\,\\left[1 + \\left(\\dfrac{x-x_0}{\\gamma}\\right)^2\\right]}\\!$')

    })
  }
)

Upvotes: 1

Related Questions