Merge pull request #40 from Appsilon/tippy

Tippy

Author: andyquinterom

NAMESPACE

@@ -8,3 +8,4 @@ export(reactable_extras_dependency)
 export(reactable_extras_server)
 export(reactable_extras_ui)
 export(text_extra)
+export(tooltip_extra)

R/dependencies.R

@@ -10,7 +10,18 @@ reactable_extras_dependency <- function() {
     version = "0.0.1",
     src = list(file = "assets"),
     package = "reactable.extras",
-    script = c("js/reactable-extras.js", "js/reactable-server.js"),
-    stylesheet = "css/reactable-server.css"
+    script = c(
+      "js/reactable-extras.js",
+      "js/reactable-server.js",
+      "js/popper.js",
+      "js/tippy.js"
+    ),
+    stylesheet = c(
+      "css/reactable-server.css",
+      "css/tippy-light.css",
+      "css/tippy-light-border.css",
+      "css/tippy-material.css",
+      "css/tippy-translucent.css"
+    )
   )
 }

R/tooltip.R

@@ -0,0 +1,25 @@
+#' Tool-tip for table headers
+#'
+#' @param content The content to be displayed in the tool-tip
+#' @param theme The theme of the tool-tip, either "light", "light-border", "material" or
+#'   "translucent"
+#'
+#' @examples
+#' reactable::colDef(header = tooltip_extra("This is my tool-tip", theme = "material"))
+#'
+#' @export
+tooltip_extra <- function(content, theme = "light") {
+  reactable::JS(
+    htmltools::doRenderTags(
+      htmltools::htmlTemplate(
+        text_ = "function(columnInfo) {
+                 return React.createElement(TooltipExtras,
+                 {column: columnInfo.name, tooltip: '{{content}}',
+                 theme: '{{theme}}'})
+        }",
+        content = content,
+        theme = theme
+      )
+    )
+  )
+}

inst/assets/css/tippy-light-border.css

@@ -9,6 +9,24 @@ function updateMemory (id, uuid, column, value) {
   memory[[id, uuid, column]] = value;
 }
 
+let ReRenderCount = 0;
+
+function GenerateTooltipId () {
+  return "tooltip-" + ReRenderCount++;
+}
+
+function TooltipExtras ({ column, tooltip, theme }) {
+  const tooltip_id = GenerateTooltipId();
+  React.useEffect(() => {
+    tippy("#" + tooltip_id, { content: tooltip, theme: theme });
+  }, []);
+  return React.createElement(
+    'span',
+    { id: tooltip_id },
+    column
+  )
+}
+
 function ButtonExtras ({ id, label, uuid, column, className, children }) {
   const onClick = event => {
     Shiny.setInputValue(id, { row: uuid, column: column}, { priority: 'event' })