examples

Basic

Works in Shiny apps, you can apply the tooltip to another element with withTippy.

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
    textInput('text', 'Text'),
    tippyThis(
      id = "text",
      content = "TEXT"
    ),
    selectInput('select', 'Select', c('a', 'b')),
    tippyThis(
      "select",
      "SELECT"
    ),
    numericInput('numeric', 'Numeric', NULL),
    tippyThis(
      "Numeric",
      "NUMERIC"
    ),
    radioButtons('radio', 'Radio', c('a', 'b')),
    tippyThis(
      "radio",
      "RADIO"
    ),
    checkboxInput('check', 'Checkbox'),
    tippyThis(
      "check",
      "CHECKBOX"
    ),
    actionButton('action', 'Action'),
    tippyThis(
      "action",
      "BUTTON"
    ),
    sliderInput('slider', 'Slider', 0, 1, 0.5),
    tippyThis(
      "slider",
      "SLIDER"
    ),
    dateInput('date', 'Date'),
    tippyThis(
      "date",
      "DATE"
    )
    
  ),
  server = function(input, output) {}
)

Defaults

You can also easily call tippy on multiple elements and create themes with tippyDefault.

library(shiny)

shinyApp(
  ui = fluidPage(
    fluidRow(
      column(
        3,
        h3("Same tooltip"),
        p("Some text", class = "tip"),
        p("Some text", class = "tip"),
        p("Some text", class = "tip"),
        p("Some text", class = "tip"),
        p("Some text", class = "tip"),
        p("Some text", class = "tip"),
        tippyTheme(".tip", content = "Tooltip")
      ),
      column(
        3, 
        h3("Different tooltips"),
        p("Some text", class = "tip2", `data-tippy-content` = "Tooltip 1"),
        p("Some text", class = "tip2", `data-tippy-content` = "Tooltip 2"),
        p("Some text", class = "tip2", `data-tippy-content` = "Tooltip 3"),
        tippyThis(".tip2")
      )
    )
 ),
 server = function(input, output, session) {}
)

Themes

Currently 4 themes:

• light
• light-border
• material
• translucent

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
    h4("Hover me", id = "tip"),
    tippyThis(
      "tip",
      "Tooltip",
      theme = "material"
    )
  ),
  server = function(input, output) {}
)

Theme

You can also use tippyTheme to define a new theme.

library(shiny)
library(tippy)

ui <- fluidPage(
  useTippy(),
  tippyTheme("myTheme", box_bg = "darkred"),
  h5("plot tooltip", id = "plotTip"),
  tippyThis(
    "plotTip",
    "Hello world",
    theme = "myTheme"
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

Plot

You can also use a plot within a tooltip.

library(shiny)
library(tippy)

ui <- fluidPage(
  useTippy(),
  plotOutput("plot"),
  h5("plot tooltip", id = "plotTip")
)

server <- function(input, output) {
  output$plot <- renderPlot({
    on.exit({
      tippy_plot(
        "plotTip", 
        "plot", 
        theme = "light",
        .hidePlot = TRUE
      )
    })
    plot(cars)
  })
}

shinyApp(ui, server)