Tooltip customization

[Tixierae]

Thanks much for the excellent package! I have two quick tooltip questions:

• how to make them fully opaque? By passing my own character vector of HTML, I'm able to tune some options (e.g., <div style='width:300px;font-size:115%>), but setting opacity:1 doesn't have any impact, so I guess it's overwritten at a higher level. Is it possible to change that?
• how to display the tooltips to the left of the points (and not to the right)? Due to my UI and the size of my tooltips, the tooltips of the points on the far right of the plot end up partly out of screen right now, which is not ideal.

Thank you very much in advance for your help!

[juba]

Hi,

For your first point, setting the opacity of your added <div> will only change the opacity of the content of the tooltip, not its background. Are you using scatterD3 inside an Rmarkdown document or a shiny app ? If yes, then the following custom CSS rule may help :

.scatterD3-tooltip {
   opacity: 1 !important;
}

For your second point, I just added a tooltip_position argument in the development version. You can pass it values such as "top left" or "bottom right", for example :

scatterD3(data = mtcars, x = wt, y = mpg, tooltip_position = "top left")

Don't hesitate to let me know if it works for you.

[Tixierae]

Thank you so much for the blazing fast answer and for adding the new feature! It works perfectly! (yes, I'm using scatterD3 inside a shiny environment)

Actually, I asked for the opacity thing because I thought it would solve my problem, but it didn't. Please run the minimal reproducible example below:

library(scatterD3) # install dev version with devtools::install_github("juba/scatterD3")
library(shiny)

my_tooltip = '</p><span style="color: #FF0000 ;background-color: #FF0000 "> ---- </span> </span> <span style="color: #ffffff;"> - </span> <span style="background-color: #9EC0E6 "> duck </span> <span style="background-color: #4788D1 "> raccoon </span> <span style="background-color: #649AD8 "> banana </span>'

ui <- shinyUI(fluidPage(
    tags$style(type='text/css',
               '.scatterD3-tooltip {opacity: 1 !important;}' 
               ),
  fluidRow(column(6,
                  htmlOutput('my_html')
                  ),
          column(6,
                 scatterD3Output('my_scatter', height='450px')
                 )
          )
))

server <- function(input, output) {
    output[['my_scatter']] = renderScatterD3({
                                            scatterD3(x = 1,
                                                      y = 1,
                                                      tooltip_text = c(my_tooltip),
                                                      )
                                             })
    output[['my_html']] = renderUI({HTML(my_tooltip)})                             
}

shinyApp(ui=ui, server=server)

You'll see that in the htmlOutput, the background color and the color of the text in <span style="color: #FF0000 ;background-color: #FF0000 "> ---- </span> are both red (intended behavior), but inside the tooltip, the color of the text is white (not red like the background). I thought the reason was opacity, but it's not. Any advice would be much appreciated!

[juba]

The white text you see in the tooltip is because of a text-shadow CSS property in the tooltip. If you add a text-shadow: none; in your style in my_tooltip, this shadow should disappear.

Let me know if this still doesn't fix your problem.

[Tixierae]

Thanks a bunch, works perfectly! I added:

tags$style(type="text/css",
    ".scatterD3-tooltip {text-shadow: none;}" 
),

on top of my fluidPage and now everything is fine. I could even add back some transparency. Closing the issue. Thanks again for the very quick and very effective help, it was much appreciated :)