Custom tooltip and hover effect rendering

Tooltip position

Argument tooltip_offx and tooltip_offy are used to offset tooltip position.

By default offset is 10 pixels horizontally to the mouse position (tooltip_offx=10) and 0 pixels vertically (tooltip_offx=10).

library(ggiraph)
dataset <- mtcars
dataset$carname <- row.names(dataset)
gg_point_1 <- ggplot(dataset, aes(x = disp, y = qsec, tooltip = carname, data_id = carname, color= wt) ) + 
    geom_point_interactive(size=3)

# htmlwidget call
ggiraph(code = {print(gg_point_1)}, tooltip_offx = 20, tooltip_offy = -10 )

Tooltip style

ggiraph function has an argument named tooltip_extra_css. It can be used to add css declarations that will be used to customize tooltip rendering.

Each css declaration includes a property name and an associated value, property name and value are separated by a colon, it always ends with a semicolon. For example color:gray;text-align:center;. Common properties are :

• background-color: background color
• color: elements color
• border-style, border-width, border-color: border properties
• width, height: size of tooltip
• padding: space around content

Tooltip opacity can be defined with argument tooltip_opacity (default to 0.9).

Let’s custom tooltip as:

• italic font
• no background color

tooltip_css <- "background-color:transparent;font-style:italic;"

Now print the ggiraph:

ggiraph(code = {print(gg_point_1)}, tooltip_extra_css = tooltip_css )

Now, let’s add a white rectangle with round borders to make it less crude and few other details:

tooltip_css <- "background-color:white;font-style:italic;padding:10px;border-radius:10px 20px 10px 20px;"

ggiraph(code = {print(gg_point_1)}, tooltip_extra_css = tooltip_css, tooltip_opacity = .75 )

Do not surround tooltip_extra_css value by curly braces, ggiraph is taking care of that.

Hover effects

Hover effects occured when mouse is over elements that have data-id attribute (resulting from using argument data_id in interactive geom functions). It will modify SVG elements rendering only when mouse will be over an element.

Effect can be configured with hover_css argument the same way tooltip_extra_css is used for customizing tooltip rendering.

css here is relative to SVG elements. SVG attributes are listed here. Common properties are:

• fill: background color
• stroke: color
• stroke-width: border width
• r: circle radius

To fill elements in red:

ggiraph(code = {print(gg_point_1)}, hover_css = "fill:red;" )

To fill svg elements in red and increase radius:

ggiraph(code = {print(gg_point_1)}, hover_css = "fill:red;r:6pt" )