bsTooltip: Enhanced Bootstrap3 tooltip

In spsComps: 'systemPipeShiny' UI and Server Components

Description

Add tooltip to any Shiny element you want. You can also customize color, font size, background color, trigger event for each individual tooltip.

Usage

bsTooltip(
  tag,
  title = "",
  placement = "top",
  bgcolor = "black",
  textcolor = "white",
  fontsize = "12px",
  fontweight = "400",
  opacity = 1,
  html = FALSE,
  trigger = "hover focus"
)

bsTip(
  tag,
  title = "",
  placement = "top",
  status = "primary",
  fontsize = "12px",
  fontweight = "400",
  opacity = 1,
  html = FALSE,
  trigger = "hover focus"
)

Arguments

tag	a shiny tag as input
title	string, tooltip text
placement	string, one of "top", "bottom", "left", "right", where to put the tooltip
bgcolor	string, background color, valid value of CSS color name or hex value or rgb value
textcolor	string, text color, valid value of CSS color name or hex value or rgb value
fontsize	string, text font size, valid value of CSS font size, like "10px", "1rem".
fontweight	string, valid font weight unit: https://www.w3schools.com/cssref/pr_font_weight.asp
opacity	numeric, between 0 and 1
html	bool, allow title contain HTML code? like "<strong>abc</strong>" click | hover | focus | manual.
trigger	string, how to trigger the tooltip, one or combination of
status	string, used only for wrapper bsTip, see details

Details

For trigger methods read: https://getbootstrap.com/docs/3.3/javascript/#tooltips-options.

Convenient wrapper function

bsTip is the convenient function for bsTooltip, which has the background and content color set to 5 different bootstrap colors, you can use status to set, one of "primary", "info", "success", "warning", "danger"

Value

shiny tag

Examples

if(interactive()){
  library(shiny)
  library(magrittr)
  ui <- fluidPage(
    br(), br(), br(), br(), br(), br(), column(2),
    actionButton("", "Tooltip on the left") %>%
      bsTooltip("Tooltip on the left", "left"),
    actionButton("", "Tooltip on the top") %>%
      bsTooltip("Tooltip on the top", "top"),
    actionButton("", "Tooltip on the right") %>%
      bsTooltip("Tooltip on the right", "right"),
    actionButton("", "Tooltip on the bottom") %>%
      bsTooltip("Tooltip on the bottom", "bottom"),
    br(), br(), column(2),
    actionButton("", "primary color") %>%
      bsTooltip("primary color", bgcolor = "#0275d8"),
    actionButton("", "danger color") %>%
      bsTooltip("danger color", bgcolor = "#d9534f"),
    actionButton("", "warning color") %>%
      bsTooltip("warning color", bgcolor = "#f0ad4e"),
    br(), br(), column(2),
    actionButton("", "9px") %>%
      bsTooltip("9px", fontsize = "9px"),
    actionButton("", "14px") %>%
      bsTooltip("14px", fontsize = "14px"),
    actionButton("", "20px") %>%
      bsTooltip("20px", fontsize = "20px"),
    br(), br(), column(2),
    actionButton("", "combined") %>%
      bsTooltip(
        "custom tooltip", "bottom",
        "#0275d8", "#eee", "15px"
      )
  )
  server <- function(input, output, session) {}
  shinyApp(ui, server)
}
if(interactive()){
  library(shiny)
  library(magrittr)
  ui <- fluidPage(
    br(), br(), br(), br(), br(), br(), column(2),
    actionButton("", "primary") %>%
      bsTip("primary", status = "primary"),
    actionButton("", "info") %>%
      bsTip("info", status = "info"),
    actionButton("", "success") %>%
      bsTip("success", status = "success"),
    actionButton("", "warning") %>%
      bsTip("warning", status = "warning"),
    actionButton("", "danger") %>%
      bsTip("danger", status = "danger")
  )
  server <- function(input, output, session) {}
  shinyApp(ui, server)
}

spsComps documentation built on Feb. 3, 2022, 1:07 a.m.