Математический режим в bsTooltip в блестящем

Ни в коем случае с shinyBS.

Вот способ использования библиотеки JavaScript qTip2.

Чтобы использовать его, вам необходимо загрузить файлы jquery. qtip.min.css и jquery.qtip.min.js и поместите эти два файла в подпапку www приложения Shiny.

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 здесь. Затем мы можем использовать функцию withMathJax() {shiny} для отображения всплывающей подсказки в виде формулы.

Я обычно использую настраиваемые всплывающие подсказки в тех случаях, когда у меня есть только несколько всплывающих подсказок, которые я хочу настроить. Его преимущество заключается в отсутствии дополнительных зависимостей. Основные недостатки этой настраиваемой всплывающей подсказки заключаются в том, что (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)