3 min read

Week44 - tooltipsterR

2015-11-06
Week44 - tooltipsterR

Only 7 More Weeks

As I typed “Week 44” in the title of the post, I realized the year is almost done. I do not anticipate another widget-a-week commitment next year, but I certainly will make some commitment. Let me know if you have ideas. Also, I have some htmlwidgets in the pipeline, but not seven, so please let me know if you have a strong compelling story for a htmlwidget to end the year with a bang.

This Week’s Widget - tooltipsterR

Tooltips are an invaluable but often neglected component of a visualization or story. The jQuery plugin tooltipster is a mature, well-documented, and full-featured tooltip library, so I feel like we need it in R and thus tooltipsterR.

Installation

This is not on CRAN, so to install we will need some help from devtools::install_github.

devtools::install_github("timelyportfolio/tooltipsterR")

Examples

Check out the nicely done tooltipster demos to see all the power and beauty of tooltipster. I’ll just show some basic examples below.

Easy

Just by adding class="tooltip" and title=..., we can get tooltips.

#devtools::install_github("timelyportfolio/tooltipsterR")

library(tooltipsterR)
library(htmltools)

tagList(
  tooltipster(),
  tags$p(
    "See if you can find my ",
    tags$span(
      class = "tooltip", # can change if desired
      title = "you found me",
      style = "border-bottom: 1px dashed #999;",      
      "tooltip"
    )
  ),
  tags$div(
    class = "tooltip",
    title = "nowhere to hide",
    style = "height:200px;width:200px;",
    style = "border-radius:100%;background:#B062C3;",
    tags$span(
      style = "text-align:center;padding-top:5.5em;display:block;",
      "not here"
    )
  )
)

With Formattable

For a little more advanced example, let’s combine tooltipsterR with week 23’s formattable.

#devtools::install_github("timelyportfolio/tooltipsterR")

library(tooltipsterR)
library(htmltools)
library(dplyr)
library(tidyr)
library(pipeR)

biggest <- formatter(
  "span",
  class = x ~ ifelse(rank(-x) ==1, "tooltipster-tooltip", ""),
  style = x ~ ifelse(rank(-x) ==1, "color:green;font-weight:bold;", NA),
  title = x ~ ifelse(rank(-x) ==1, "most common", NA)
)

hair_eye <- prop.table(
  xtabs(Freq~Eye+Hair,HairEyeColor)
) %>>%
  data.frame() %>>%
  mutate( Freq = percent(Freq) ) %>>%
  spread(
    Eye, Freq
  )

hair_eye %>>%
  (
    formattable(
      .,
      structure(
        lapply(
          colnames(.)[-1],
          function(z){
            biggest
          }
        ),
        names = colnames(.)[-1]
      )
    )
  ) %>>%
  formattable::as.htmlwidget() %>>%
  tagList(
    tooltipster()
  ) %>>%
  browsable

With SVG

My favorite thing about tooltipster is it works with SVG. Let’s add a tooltip to our points that tells us their color. By the way, if you have not seen svglite, I strongly encourage checking it out.

#devtools::install_github("timelyportfolio/tooltipsterR")

library(tooltipsterR)
library(htmltools)
#devtools::install_github("hadley/svglite")
library(svglite)

browsable(
  tagList(
    htmlSVG(plot(1:3,col=blues9[7:9],pch=16,cex=3)),
    tooltipster(),
    tags$script(
"
$('circle').each(function(){
  $(this).tooltipster({
    content: $(this).css('fill')
  })
})
"      
    )
  )
)

Thanks

Thanks Caleb Jacob for tooltipster.

As always, thanks to

  • Ramnath Vaidyanathan and RStudio for htmlwidgets
  • all the contributors to R and JavaScript