Add tooltip to button in rintrojs Shiny

Question

I would like to create an introtour in my shiny app using the rintrojs package with introjs function. In this introtour I would like to add a tooltip to the next button. In the documentation of intro.js there is mentioned the Tour HTML attribute data-intro which should be the tooltip text. But I'm not sure how we could implement this in an rintrojs. Here is some reproducible code from the documentation:

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)

Output when you start in Intro:

Now I would like to add a tooltip to the "Onwards and Upwards" button. So I was wondering if anyone knows how to add a tooltip to the next button of a rintrojs?

Answer 1

I don't think that the data-intro attribute can be used for modifying a tooltip related to the next button. However, you can use a sendCustomMessage which sends the tooltip text to JS and a message handler which modifies the title attribute of the next button.

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)