Tooltips for high points on low-height charts not

I have a problem with tooltips not showing depending on the size of the chart/browser window. This originally looked to me like a problem with facet charts but the behaviour is also evident on regular/single charts. I've done a lot of searching for this and not found anything so far. There is a similar post over on plotly forums with no answers as of yet.

Here is an MRE for a single chart (HT)...

require(ggplot2)
require(plotly)

randomName <- function(n) {
    random.string <- rep(NA, n)
    randomizeString <- function(x) {
        a <-sample(letters, 1, replace = TRUE)
        return(a)
    }
    return(paste(c(sapply(random.string, randomizeString, simplify = TRUE)), collapse = ""))
}

xvar = replicate(10, randomName(15))

df1 <- data.frame(x = xvar, y = xvar, z = runif(10) )

df1$tooltip <- sprintf("x: %s<br>y: %s<br>z: %s<br>2x: %s<br>2y: %s<br>2z: %s<br>3x: %s<br>3y: %s<br>3z: %s"
                                        ,df1$x, df1$y, df1$z, df1$x, df1$y, df1$z, df1$x, df1$y, df1$z)

g = ggplot(df1, aes(x,y,fill=z, text = tooltip)) +
        geom_tile()

ggplotly(g, tooltip = "tooltip")

If you resize the browser window to a small enough height you will notice that the tooltip will not be displayed when hovering over the tiles near the top of the chart. The problem appears to be that the tooltip is too tall to display whereby the hover position would place the top of the tooltip box outside the top of the chart. This kind of makes sense even if problematic. However, this MRE example is a bit contrived and unrealistic.

This behaviour becomes a real issue on a facet chart with a large number of facets requiring tooltips. Here is an MRE for a facet chart. Even with a maximised browser window the same tooltip issue is evident.

require(ggplot2)
require(plotly)

randomName <- function(n) {
    random.string <- rep(NA, n)
    randomizeString <- function(x) {
        a <-sample(letters, 1, replace = TRUE)
        return(a)
    }
    return(paste(c(sapply(random.string, randomizeString, simplify = TRUE)), collapse = ""))
}

xvar = replicate(10, randomName(15))
facet_var = replicate(12, randomName(2))

df1 <- data.frame(x = xvar, y = xvar, z = runif(10) )
df1 <- merge(x = facet_var, y = df1, by = NULL)

#df1$tooltip <- sprintf("x: %s<br>y: %s<br>z: %s<br>x+x: %s<br>y+y: %s<br>z+z: %s"
df1$tooltip <- sprintf("facet: %s<br>x: %s<br>y: %s<br>z: %s<br>2x: %s<br>2y: %s<br>2z: %s<br>3x: %s<br>3y: %s<br>3z: %s"
                                        ,df1$x.x, df1$x.y, df1$y, df1$z, df1$x.y, df1$y, df1$z, df1$x.y, df1$y, df1$z)

g = ggplot(df1, aes(x.y,y,fill=z, text = tooltip)) +
        geom_tile() +
        facet_wrap(~x.x, ncol=2)

ggplotly(g, tooltip = "tooltip")

This issue exists both for default and bespoke tooltips - tested in Chrome(v56) and Edge(v38).

I had an earlier question posted on SO regarding this issue but my analysis was off the mark, and my example not an MRE, and I have closed/answered that question since.

I could reduce the number of lines in the tooltip to obviate the problem but I'd prefer not to have to do that. Is this a known feature or is there a workaround for this behaviour?

回答1:

I had the same problem. Adding hovermode "closest" to layout fixed it.

js:

layout:{...,hovermode:"closest"}

R (based on Maximillian Peters' answer, but untested):

gp <- ggplotly(g, tooltip = "tooltip")
gp[['x']][['layout']][['hovermode']]='closest'

回答2:

One possibility/workaround would be to set hovermode to 'y', i.e. change the last line of your example to:

gp <- ggplotly(g, tooltip = "tooltip")
gp[['x']][['layout']][['hovermode']]='y'

Reduced window size in RStudio for your first example

Part of the fullscreen for your second example.

回答3:

The only way that I can see of working around this behaviour is to ensure that the tootip is no more that 1 or two lines deep which is, I suppose, what the intention of a tooltip is in the first place! That is what I am going to go with.

I was hoping to elaborate on the "tooltip" to have a nicely formatted tooltip containing a td/table. Maybe there is an alternative approach to achieving this effect?