Create Fomantic UI Popup

Add a tooltip to an element that on hover will show extra information

addTooltip will only use a basic CSS tooltip with a limited amount of functionality, whereas addPopup is initialised with JS, and can include more functionality

addPopup(
  el,
  text,
  position = NULL,
  variation = NULL,
  inverted = FALSE,
  title = NULL,
  offset = NULL,
  settings = NULL,
  html = FALSE
)

addTooltip(el, text, position = NULL, variation = NULL, inverted = FALSE)

Arguments

el

A UI element that the tooltip will be applied to

text

Contents of the tooltip. Can either be a character string or an HTML object

position

(Optional) Force the popup to appear in a direction relative to el. Choose a vertical position from "top", "bottom", "" and a horizontal from "left", "center", "right", ""

variation

(Optional) Add certain features to the popup

mini, tiny, small, medium, large, huge

Affect the size of the font in the popup

basic

Removes the pointing arrow of the popup

fixed, wide (addPopup only), very wide (addPopup only)

Affect the width of the popup

inverted

Should the colours of the popup be inverted?

title

(Optional) Add a title to the popup. Only appears when html = FALSE

offset

(Optional) A numeric value of the number of pixel to offset the tooltip by

settings

Named list of settings to be applied to the popup. Check Fomantic UI website for full list. For example list(on = "click") will mean the popup appears on a click rather than a hover.

html

Is text valid HTML code? Defaults to FALSE

Value

addTooltip will return el with extra attributes added to the top level tag. addPopup will return a shiny.tag.list, first similar to addTooltip an updated version of el. Then a small JS script has been added to enable the popup.

See also

https://fomantic-ui.com/modules/popup.html

Examples

addPopup(
  fui_el$label(id = "help_label", class = "small circular", "?"),
  "This can be used as a help icon in a shiny app",
  inverted = TRUE
)
#> <div class="ui label small circular" data-content="This can be used as a help icon in a shiny app" data-inverted="" id="help_label">?</div>
#> <script>$('#help_label').popup();</script>

addTooltip(
  fui_el$label(class = "small circular", "?"),
  "This can be used as a help icon in a shiny app"
)
#> <div class="ui label small circular" data-tooltip="This can be used as a help icon in a shiny app">?</div>