rshinyshinybs

Render shiny.i18n translation in tooltips

I want to use shiny.i18n in my app, which uses tooltips to provide more information on certain elements (using two types of tooltips, either with tipify or bsTooltip). However, I could not find how to integrate both, and the tooltips are not rendered properly.

As an example, this:

library(shiny)
library(shinyjs)
library(shinyBS)
library(shiny.i18n)

i18n <- Translator$new(translation_csvs_path = "data_translation/")
i18n$set_translation_language("en")

ui <- fluidPage(
  useShinyjs(),
  shiny.i18n::usei18n(i18n),
  div(style = "float: left;",
      selectInput('selected_language',
                  i18n$t("Change language"),
                  choices = i18n$get_languages(),
                  selected = i18n$get_key_translation())
  ),
  
  mainPanel(
    i18n$t("This is some text without a tooltip"),
    
    textOutput("Text"),
    bsTooltip("Text", 
            i18n$t("This is some text"),
            placement="right", trigger = "hover", options=list(container="body")),
 
     tipify(
    actionButton("Button", "", icon = icon("house-user")),
    i18n$t("This is a button"), 
    placement="right", trigger = "hover", options=list(container="body"))
))


server <- function(input, output, session) {
  observeEvent(input$selected_language, {
    shiny.i18n::update_lang(session, input$selected_language)
  })
  output$Text <- renderText({i18n$t("This is some text with a tooltip")})
}

shinyApp(ui, server)

file translate_fr.csv:

"en","fr" 
"Hello","Bonjour" 
"This is some text without a tooltip","Ceci est un texte sans tooltip" 
"This is some text with a tooltip","Ceci est un texte avec tooltip"
"This is a button", "Ceci est un bouton" 
"This is some text", "Ceci est un texte" 
"Change language","Changer de langue"

returns:

enter image description here

While the tooltip should just contain "This is a button". I'm quite new to these tools - what am I missing?

Solution

  • The Problem is that the tooltips and tipify do not support HTML. That is the reason why your tooltips display the raw HTML created by shiny.18n.

    There are two ways to achieve what you want.

    The first one is to use popovers from the shinyBS packages. These support HTML and will achieve the language feature you are looking for.

    The other one is to render the tooltips on the serverside in shiny. This way no HTML will be involved in creating the translations. This way would allow you to even use tipify/tooltips you asked for.

    The reason for this problem is, that shiny.18n has two kind of tricks to achieve the translations. The first one is one the browser side. As you displayed shiny.18n is wrapping a span tag around the translations, so that it can later be modified by using JavaScripts in the browser.

    The other method is to render everything new on the server side. This way no HTML will be needed, as the process is happening not on the browser anyway.