Tooltips with R and jQuery

[This article was first published on Omnia sunt Communia! » R-english, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

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, 
                   '<br />y = ', point$y, 
                   '<br />ID = ', idPoint, sep='')
  imageURL <- ''
  imageInfo <- paste("<img src=", imageURL, " width='50' />", sep='')
  tooltip <- paste(imageInfo, info, sep='<br />')
  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 <- '<!DOCTYPE html>
  <title>Tooltips with jQuery and gridSVG</title>
  <link rel="stylesheet" type="text/css" href="css/tooltipster.css" />

htmlEnd <- '</body>

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 about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

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)