Translating tooltips

[marton-balazs-kovacs]

Great tool! I am using the tool to do client side translations as server side translations are quite slow in my case. However, since you wrap everything in a span that needs to be translated I could not figure out a way to translate tooltips on the client side. Do you have any recommendations for that? If it is not possible can I mix client side and server side translations? So only the tooltips would be handled on the server side. Thanks!

[mickeykawai]

Below approach worked at server side.

1. Create a reactive variable i18n_r(). (ref. 1)
2. Weirdly, one icon() and bsTooltip() are required to show up them in server side.
3. Instead of adding tooltip on label of selectInput, workaround is 1) not show label of selectInput and 2) instead add htmlOutput() (ref. 2) and do at server side.

(ref.1) dokato commented on Dec 28, 2020 • https://github.com/Appsilon/shiny.i18n/issues/54

(ref.2) davlee1972 commented on Dec 10, 2016 https://github.com/rstudio/shiny/issues/1499

To try the code, rename the attached 'translation.json.txt' to 'translation.json' and put it at working dir. translation.json.txt

library(shiny)

library(shinyBS)
library(shiny.i18n)

i18n <- Translator$new(translation_json_path = "translation.json")

choices_select <- c("one", "two", "three")

ui <- fluidPage(
  usei18n(i18n),
  h1(i18n$t("Hello")),
  actionButton("change", i18n$t("Change language")),

  h5(icon( id = 'q_dummy', name = "question-circle")),
  bsTooltip("q_dummy", "Weirdly, one icon() and bsTooltip() are required to show up them in server side", "right", trigger = 'click', options = list(container = "body")), 

  radioButtons("radio", i18n$t("Radio"), c("one", "two")),

  htmlOutput("o_q_select"), 
  selectInput("select", label = NULL, c("one", "two", "three")),
  #selectInput("select", i18n$t("Choose"), c("one", "two", "three")),

  htmlOutput("od_info"), 

  verbatimTextOutput("o_select")
)

server <- function(input, output, session) {

  i18n_r <- reactive({
    i18n
  })

  observeEvent(input$change, {
    lang <- ifelse(as.numeric(input$change) %% 2, "pl", "en")
    shiny.i18n::update_lang(session, lang)
    i18n_r()$set_translation_language(lang)
  })

  update_choices_select <- reactive({
    names(choices_select) <- i18n_r()$t(choices_select)
    print(choices_select)
    choices_select
  })

  output$o_q_select <- renderText({
    str_tooltip <- i18n$t("Here choose number among the 3 numbers")
    print(str_tooltip)

    paste(
      strong(span(i18n$t("Choose"))), 
      span(
        icon( id = 'q_choose', name = "question-circle"), 
        bsTooltip(
          "q_choose", 
          str_tooltip, 
          "right", #trigger = 'click', 
          options = list(container = "body")
        )
      ),
      br()
      , sep = '')
  })

  observe({
    updateRadioButtons(session, "radio", label = i18n_r()$t("Radio"),
                       choices = i18n_r()$t(c("one", "two")), selected = character(0))
    updateSelectInput(session, "select", label = NULL,
    #updateSelectInput(session, "select", label = i18n_r()$t("Choose"),
                      choices = update_choices_select())
                      #choices = i18n_r()$t(update_choices_select()))
                      #choices = i18n_r()$t(c("one", "two", "three")))
  })

  output$o_select <- renderText({ 
    input$select

  })

  output$od_info <- renderText({ 
    str_tooltip <- i18n$t("My message")

    paste(
      strong(span( style="color:blue; font-weight: 700;", i18n$t("Msg"))), #span('mmm'), 

      " ", 
      span(
        icon( id = 'q_rel_abund', name = "question-circle"), 
        bsTooltip(
          "q_rel_abund", 
          str_tooltip, 
          "right", trigger = 'click', options = list(container = "body")
        )
      ),
      #span('xxx'),
      br()
      , sep = '')
  })

}

shinyApp(ui, server)