Tooltips with R and jQuery
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)){
grid.circle(x[i], y[i], r=unit(5, 'mm'),
default.units='native',
## Add the identifier
name = paste('myPoint', identifier[i], sep='.'),
gp=gpar(fill='gray',...))
}}
library(gridSVG)
library(lattice)
x <- rnorm(10)
y <- rnorm(10)
id <- seq_along(x)
df <- data.frame(x, y, id)
xyplot(y ~ x, data=df,
panel=panel.circles,
## Identifier of each circle
identifier=df$id)
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 <- 'http://developer.r-project.org/Logo/Rlogo-5.png'
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 grid.script(file='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js') ## tooltipster (downloaded from http://calebjacob.com/tooltipster/) grid.script(file='js/jquery.tooltipster.min.js')
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() {
$('[id^="myPoint"]').tooltipster({
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.
grid.script(file='js/myTooltipLattice.js')
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).
gridToSVG('tooltipLattice.svg')
htmlBegin <- '<!DOCTYPE html>
<html>
<head>
<title>Tooltips with jQuery and gridSVG</title>
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
</head>
<body>'
htmlEnd <- '</body>
</html>'
svgText <- paste(readLines('tooltipLattice.svg'), collapse='\n')
writeLines(paste(htmlBegin, svgText, htmlEnd, sep='\n'),
'tooltipLattice.html')
The result is available here.
R-bloggers.com 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.