bsTooltip中的数学模式闪亮

问题描述

我想知道是否可以使用bsTooltip()包中的shinyBS在工具提示标题中包括数学模式。

小例子：

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)

结果（数学模式）不令人满意：

解决方法

无法使用“ shinyBS”。

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

要使用它，您必须download文件 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)

,

只需添加另一个选项，我们就可以按照W3 here中的示例创建自己的工具提示类。然后，我们可以使用{shiny}的withMathJax()函数将工具提示呈现为公式。

在只有少数几个我要自定义的工具提示的情况下，我通常会使用自定义工具提示。它的优点是它没有其他依赖项。此自定义工具提示的主要缺点是（1）像子元素一样显示在顶层，而不是像使用javascript生成的工具提示一样在顶层的单独容器中显示；以及（2）您必须为每个箭头方向创建css类。因此，如果您有许多指向不同方向的工具提示，那么像qTip2这样的附加javascript库绝对值得依赖。

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;
          }")
      )
  ),mainPanel(

    p("some text",))

server <- shinyServer(function(input,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)