如何为rintrojs引导流程的「下一步」按钮添加提示框？

要给自定义文本为「Onwards and Upwards」的下一步按钮添加提示框，你可以借助intro.js的事件机制，在引导启动后通过JavaScript为按钮添加tooltip。以下是具体实现方法：

实现思路 #

利用intro.js的onstart事件（引导流程启动时触发），通过DOM操作选中下一步按钮，为其添加原生的title属性（鼠标悬停时会自动显示提示文本）。intro.js默认给下一步按钮分配的类名是introjs-nextbutton，可以通过这个类名精准定位按钮。

修改后的完整代码 #

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")'),
                         # 为下一步按钮添加tooltip
                         "onstart"=I('document.querySelector(".introjs-nextbutton").setAttribute("title", "点击进入下一个引导步骤")')
                       )))
})

shinyApp(ui = ui, server = server)

关键修改说明 #

在introjs()函数的events参数中新增了onstart事件：

• 用I()包裹JavaScript代码，确保Shiny不会转义这段代码。
• 通过document.querySelector(".introjs-nextbutton")定位下一步按钮。
• 调用setAttribute("title", "提示文本")为按钮添加原生tooltip，你可以自行修改引号内的提示内容。

如果需要更复杂的自定义tooltip样式，可以结合其他前端tooltip库，但原生title属性是最简便的实现方式。

内容的提问来源于stack exchange，提问作者Quinten