在 rintrojs Shiny 中为按钮添加工具提示

Question

我想使用带有 rintrojs

 功能的 

introjs 包在我的闪亮应用程序中创建一个介绍。在本介绍中，我想向下一个按钮添加一个工具提示。在

intro.js

的文档中提到了 Tour HTML 属性

data-intro

，它应该是工具提示文本。但我不确定我们如何在

rintrojs

中实现这一点。这是文档中的一些可重现的代码：

library(rintrojs)
library(shiny)

ui <- shinyUI(fluidPage(
  introjsUI(), 
  mainPanel(
    introBox(
      tableOutput("mtcars"),
      data.step = 1,
      data.intro = "This is the table"
    ),
    introBox(
      actionButton("btn","Intro"),
      data.step = 2,
      data.intro = "This is the button",
      data.hint = "Here is clue"
    )
  )))
server <- shinyServer(function(input, output, session) {
  
  hintjs(session, options = list("hintButtonLabel"="That was a hint"))
  
  output$mtcars <- renderTable({
    head(mtcars)
  })
  observeEvent(input$btn,
               introjs(session, options = list("nextLabel"="Onwards and Upwards"),
                       events = list("oncomplete"=I('alert("It is over")'))))
})

shinyApp(ui = ui, server = server)

在 Intro 中启动时输出：

现在我想向“向前和向上”按钮添加一个工具提示。所以我想知道是否有人知道如何向 rintrojs 的下一个按钮添加工具提示？

Answer 1

我不认为

data-intro

属性可用于修改与下一个按钮相关的工具提示。但是，您可以使用将工具提示文本发送到 sendCustomMessage

 的 

JS 和修改下一个按钮的

title

属性的消息处理程序。

library(rintrojs)
library(shiny)

ui <- shinyUI(fluidPage(
  tags$head(
    tags$script(
      'Shiny.addCustomMessageHandler("setNextButtonTooltip",
        function(message) {
          document.getElementsByClassName(
            "introjs-nextbutton"
          )[0].setAttribute("title", message.text)
        });'
    )
  ),
  introjsUI(),
  mainPanel(
    introBox(
      tableOutput("mtcars"),
      data.step = 1,
      data.intro = "This is the table"
    ),
    introBox(
      actionButton("btn", "Intro"),
      data.step = 2,
      data.intro = "This is the button",
      data.hint = "Here is clue"
    )
  )
))
server <- shinyServer(function(input, output, session) {
  hintjs(session, options = list("hintButtonLabel" = "That was a hint"))
  
  output$mtcars <- renderTable({
    head(mtcars)
  })
  observeEvent(input$btn, {
    introjs(
      session,
      options = list("nextLabel" = "Onwards and Upwards"),
      events = list("oncomplete" = I('alert("It is over")'))
    )
    session$sendCustomMessage(type = 'setNextButtonTooltip',
                              message = list(text = "This is a tooltip"))
  })
})

shinyApp(ui = ui, server = server)