Tooltips with R and jQuery

January 3, 2013

(This article was first published on Omnia sunt Communia! » R-english, and kindly contributed to R-bloggers)

Tooltips appear frequently in webpages, usually associated with JavaScript code. There are several Javascript scripts and libraries to populate your webpage with tooltips. In this post I will show how to use gridSVG to enhance a graphic produced with R to show tooltips with the library jQuery and its plugin tooltipster.

EDIT: There is an updated version of the code below that use both qTip2 and tooltipster. The code is available at github. Visit the result with qTip2 and with tooltipster. Anyway, the procedure illustrated below is still valid.

The first step is to produce the graphic. We will use a custom panel function which assigns unique identifiers to each element.

panel.circles <- function(x, y, identifier,...){
    for (i in seq_along(x)){[i], y[i], r=unit(5, 'mm'),
                ## Add the identifier
                name = paste('myPoint', identifier[i], sep='.'), 

x <- rnorm(10)
y <- rnorm(10)
id <- seq_along(x)
df <- data.frame(x, y, id)

xyplot(y ~ x, data=df,
       ## Identifier of each circle

The tooltipster plugin will use the content of the title attribute of each element to show the tooltip. Therefore we visit each circle to add content to the title attribute with grid.garnish.

for (i in 1:nrow(df)){
  idPoint <- df[i, "id"]
  ## Each circle is identified with myPoint.1, myPoint.2,etc.
  namePoint <- paste('myPoint', idPoint, sep='.')
  point <- signif(df[i, ], 2)
  ## Text to be included in the 'title' attribute
  info <- paste('x = ', point$x, 
y = ', point$y, '
ID = ', idPoint, sep='') imageURL <- '' imageInfo <- paste("", sep='') tooltip <- paste(imageInfo, info, sep='
') grid.garnish(namePoint, title=tooltip) }

Next step is to add JavaScript code to the graphic with the grid.script function. The jQuery library can be loaded with being downloaded. However, you need a local copy of the tooltipster plugin. Next code assumes that this local copy is located in a folder named js.

## jQuery
## tooltipster (downloaded from

An additional small JavaScript code is needed to join them all. It is a simple jQuery filter that triggers a tooltip when an object whose id begins with myPoint is hovered over. For details about fixedWidth, arrow and followMouse you should visit the tooltipster webpage.

$(document).ready(function() {
        fixedWidth: 120,
        arrow: false,
        followMouse: true

Save this code in a file named myTooltipLattice.js (for example) under the js/ folder. Then you can add it to the graphic with grid.script.


Last step is to produce the SVG file and include it in a basic HTML page. If you wish you can change the title of this page and modify the tooltip CSS configuration using the tooltipster.css file (included in the tooltipster plugin).


htmlBegin <- '
  Tooltips with jQuery and gridSVG

htmlEnd <- '

svgText <- paste(readLines('tooltipLattice.svg'), collapse='\n')

writeLines(paste(htmlBegin, svgText, htmlEnd, sep='\n'),

The result is available here.

To leave a comment for the author, please follow the link and comment on their blog: Omnia sunt Communia! » R-english. offers daily e-mail updates about R news and tutorials on topics such as: Data science, Big Data, R jobs, visualization (ggplot2, Boxplots, maps, animation), programming (RStudio, Sweave, LaTeX, SQL, Eclipse, git, hadoop, Web Scraping) statistics (regression, PCA, time series, trading) and more...

If you got this far, why not subscribe for updates from the site? Choose your flavor: e-mail, twitter, RSS, or facebook...

Comments are closed.


Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)