bsTooltip 中的数学模式闪亮

Question

我想知道这些是否是使用bsTooltip()from shinyBSpackage在工具提示标题中包含数学模式的任何选项。

小例子：

rm(list = ls())
library(shiny)
library(shinyBS)

ui <- basicPage(
  headerPanel("Tooltip test"),
  bsTooltip(id = "Equation", title = "\\(\\bar{X} = \\frac{1}{n}\\sum_{p = 1}^{n}X_p\\)", placement = "bottom", trigger = "hover", options = NULL),
  mainPanel(
    p("some text", htmlOutput("Equation", inline = TRUE))
  )
)

server <- shinyServer(function(input, output,session) {
  output$Equation <- renderUI({HTML("<font color='blue'><u>something which needs equation</u></font>")})
})
shinyApp(ui = ui, server = server)

结果（数学模式）不理想：

Answer 1

'shinyBS' 没办法。

这是使用qTip2 JavaScript 库的一种方法。

为了使用它，您必须下载文件jquery.qtip.min.css和jquery.qtip.min.js，并将这两个文件放在Shiny 应用程序的www子文件夹中。

library(shiny)

js <- "
    $(document).ready(function() {
      $('#Equation').qtip({
        overwrite: true,
        content: {
          text: $('#tooltip')
        },
        position: {
          my: 'top left',
          at: 'bottom right'
        },
        show: {
          ready: false
        },
        hide: {
          event: 'unfocus'
        },
        style: {
          classes: 'qtip-youtube qtip-rounded'
        },
        events: {
          blur: function(event, api) {
            api.elements.tooltip.hide();
          }
        }
      });
    });
"

library(shiny)

ui <- basicPage(
  tags$head(
    tags$link(rel = "stylesheet", href = "jquery.qtip.min.css"),
    tags$script(src = "jquery.qtip.min.js"),
    tags$script(HTML(js)),
  ),
  withMathJax(),
  headerPanel("Tooltip test"),

  mainPanel(
    p("some text", htmlOutput("Equation", inline = TRUE)),
    div(
      id = "tooltip", style = "display: none;",
      HTML("$$\\int_0^1 f(x) dx = \\pi$$")
    )
  )
)

server <- shinyServer(function(input, output,session) {

  output$Equation <- 
    renderUI({HTML("<font color='blue'><u>something which needs equation</u></font>")})

})

shinyApp(ui = ui, server = server)

Answer 2

只是为了添加另一个选项，我们可以按照 W3此处的示例创建我们自己的工具提示类。然后我们可以使用 {shiny} 的withMathJax()函数将工具提示渲染为公式。

当我只有几个想要自定义的工具提示时，我通常会使用自定义工具提示。它的优点是没有额外的依赖项。此自定义工具提示的主要缺点是（1）它显示为子元素，而不是像使用 javascript 生成的工具提示那样显示在顶层的单独容器中，并且（2）您必须为每个箭头方向创建 css 类。因此，如果您有许多指向不同方向的工具提示，那么额外的 javascript 库（例如）qTip2绝对值得依赖。

library(shiny)

ui <- fluidPage(

  tags$head(
    tags$style(HTML(
      # tooltip implementation from:
      # https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_top
      # just added a `t` to make classes unique
         ".ttooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
          }

          .ttooltip .ttooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            top: 150%;
            left: 50%;
            margin-left: -60px;
          }

          .ttooltip .ttooltiptext::after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent black transparent;
          }

          .ttooltip:hover .ttooltiptext {
            visibility: visible;
          }")
      )
  ),

  headerPanel("Tooltip test"),

  mainPanel(

    p("some text", htmlOutput("Equation", inline = TRUE)),

  ))

server <- shinyServer(function(input, output,session) {

  output$Equation <- renderUI({
      span(class = "ttooltip",
           style = "color: blue",
            "something which needs equation",
           span(class = "ttooltiptext",
                withMathJax("$$\\bar{X} = \\frac{1}{n}\\sum_{p = 1}$$"))
           )
    })
})

shinyApp(ui = ui, server = server)