As mentioned here, when there are enough lines of text, the popup box will not fit around them all and the text overflows. Additionally, when the popup box reaches it max height/width, 2 of the corners are rounded. My main question: Is there a way to force the popup box to contain all text? Side question: is it possible to overwrite the rounded corners?

Thanks in advance for any help.

Hi there :)

Just discovered this tool and it is really great!
I have a quick question though.
I'm using the tooltip as follow:
tippy("Hover me!", tooltip = "put help text here")

I'm using it on a markdown page with the rmdformats library (using the templates material). and my issue is that the size of the text is very small. Is there something that I can do to change that?

Many thanks!

This is similar to #2, but I open a new issue because the other one is 3 years old.

tippyThis does not work with selectizeInput because of the complex component hiding this widget does. For an id of "phase", I also tried "tippyThis("phase-selectized"), but this also does not work.

Using tippy directly is fine, but I prefer to add all tippies like this:

tippy_text = tribble(
  ~id, ~text,
  "save", "Save temporarily",
...
) 
# Use tippy directly in ui for selectize boxes
# Call this function in ui
tippy_all = function() {
  invisible(apply(tippy_text, 1, function(x) tippyThis(x["id"], x["text"])))
}

shinyBS (which is no longer maintained) had a function to add/modify popup in server.R

I have a simple .qmd file which knits to an html. It contains some tooltips added with tippy package. Is there a way to use markdown formatting inside a tip (for example, italics or bold)?

---
title: 'final'
format: html
fontsize: '18pt'
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
library(tippy)
```

Rumpitur <span style='color:blue;'> [invidia]{id='a'} </span> quidam, carissime Iuli...
 
```{r}
tippy::tippy_this(elementId = 'a', 
            tooltip = 'abl. causae', theme = 'light')
```

Hi @JohnCoene,
Hope you're doing well! I'm still enthused about learning how Javascript and R function together and have been diving in and trying to understand how more of these R packages that port JS libraries are working. Hopefully this issue and associated PR are helpful.

I'm trying to use the new tippy_show method .
This issue requires merging #32 to get the R side of the tippy_* methods functioning properly first.

The tippy_show method doesn't work to show the actual selectors passed into the function, instead it's defaulting to show all visible.

I think it has something to do with the Map get method.

This JS get method for the Map class is being passed an array of selectors via the tippy-method routine, however the get method doesn't seem to work properly to find DOM selectors.
When I look at window.tooltips in the console, I don't see a get method, I only see those you've declared in the file linked above.

I found a workaround that works using shinyjs which is demoed below, which may provide a clue as to what needs to change to get the show method working properly.

Here's a reprex to demonstrate:

library(shiny)
# devtools::load_all("~/Documents/R/Contributor_Repos/tippy")
# Either merge the branch, or pull it and load your local tippy repo here
require(shinyjs)
ui <- fluidPage(
  shinyjs::useShinyjs(),
  div(
    tippy::tippy(
      actionButton("test", "Test"),
      content = "Im the test button"
    ),
    actionButton("show",
                 "I should show the tooltip, but I show all tooltips"),
    tippy::tippy(
      actionButton("test2", "Test2"),
      content = "But I show the actual tooltip"
    )

  )
)

server <- function(input, output, session) {

  observeEvent(input$show, {
    tippy::tippy_show("test")
  })
  observeEvent(input$test2, {
    shinyjs::runjs("window.tooltips.show(['#test'])")
  })

}

shinyApp(ui, server)

If you have some good guidance on how to fix this I might be able to fix it, if that's easier.

The following works well with tippy.js, but I do not see how to insert a timeout function in tippy_this.

tippy('#button', {
  trigger: 'click',
  hideOnClick: false,
  onShow(instance) {
    setTimeout(() => {
      instance.hide();
    }, 2000);
  }
});

library(shiny)
library(tippy)

ui <- fluidPage(
  shiny::actionButton("action", "CLick here"),
  
  tippy_this("action",
             tooltip = "This is a tooltip",
             hideOnClick = F,
             placement = 'bottom',
             trigger = 'click',
             duration = 1000
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

Would it be possible to submit 1.0 to CRAN now? I have a package that uses the features of 1.0 and cannot submit it to CRAN because of tippy.

Hi john thanks for the package.

I'm using tippy inside Shiny.
Using the function with_tippy i'd like to be able to increase the size of the tip text as it's very very small.

An example:

In ui.R:

library(shiny)
library(tippy)
library(shinydashboard)

header<-dashboardHeader('example')
sidebar<-dashboardSidebar(
           radioButtons("checkboxfatt","Filtro fatturato",
                        choices = c("SI","NO"),
                        selected="NO")

           tippy_this(elementId = "checkboxfatt",
                      tooltip = "tessst", allowHTML = TRUE,
                      width='25px',height='25px',
                      placement = "right"),

body<-dashboardBody()
dashboardPage(header, sidebar, body)

As indicated in #1 width and weight args doesn't work.
Any solution?

shiny tippy does not support download button
e.g.
tippy(downloadButton(outputId = 'downloadall','Download',style="color:black;text-align: center;width:70%;"),
tooltip = "Hi, I'm the tooltip!", animation = "scale",duration = 1000, placement = "bottom",theme = "light")
Unable to download successfully；

"downloadButton(outputId = 'downloadall','Download',style="color:black;text-align: center;width:70%;")"
Can be downloaded normally！

Great package @JohnCoene! Thanks for immediately beautifying my world! This may already be possible, but I at least couldn't readily see how. Is there some kind of tippy_theme() function to set a bunch of default parameters so subsequent calls within same R session can then be just tippy("text", tooltip = "tip") minus the other distracting guff? Obvious and direct analogy to ggplot2::theme_update(). This functionality - if not currently possible - ought to be pretty easy to incorporate, and would at least for me be quite useful.

I cannot find documentation for which argument needs to be passed to the ... in order to change the font size in the rendered tippy. I am currently using the stable release and would prefer to keep using it. I see that the development version has a function where changing font size is available, but the author makes clear that it will obviously be breaking with ongoing development. Is there a sense of when font size control will be available in a CRAN release?

The stable release links to this reference page, but I can't find anything relating to font size. I've been trying different options like using custom CSS within the RMarkdown chunk, but it doesn't seem to play nice with the tippy function.

In the newest package version, tippys are not reacting to changes in shiny inputs (specifically radio buttons) - I'm using tippyOutput and renderTippy ... they'll populate with data at the front end, but then as the inputs are changed which also changes a reactive, the tippy does not react

For advanced users, tooltips sometimes get into the way, so I usually provide a "Hide All Tooltips" checkbox. This can be done with CSS, but a simple documented function would be nice to have.

Hi,
Thanks for the work on this package, it's really great!

I'm trying to set the height and width of the tooltip so that it encompasses all the content. The width of the tooltip seems to be determined based off the height of the tooltip that fits the content at "100%"

library(shiny)
library(tippy)
shinyApp(
  ui = fluidPage(
    tippy(text = "<b>Text</b>",
          allowHTML = T,
          interactive = T,
          tooltip = paste(img(src="http://tippy.john-coene.com/logo.png",
                              height="150%", width = "150%")),
          placement = "right",
          arrow = T,
          height = '600px', width = '600px' # this doesn't appear to do anything
    )
  ),
  server = function(input, output) {}
)

Running that snippet, you can see that the tooltip height is good but the width is short. Changing the height and width arguments inside the img() function to 100% fix the out-of-tooltip issue, but the tooltip is a fixed size and the image is forced to be that size.

Is there a way to change the size of the tooltip? The size argument doesn't seem to work either, however it does something:

Cheers

Hi! First off, I absolutely love this package - I'm using shinyjqui and can't use a bootstrap tooltip so this is super helpful! I have some really long tooltip labels I was wondering if there's a way to set the max width and force text wrapping for long tooltips?

Thanks again!

library(shiny)
library(shinyjs)
library(tippy)

dummy <- c(letters[1:15])

rowBlocks <- function(data, name)
{
  div(style = "
      text-align: center;
      font-size: 12px;
      background-color: #A9A9A9;
      border-radius: 10px;
      min-width: 80px;
      color: black; margin-bottom: 5px;
      ",
      div(class = "tt", id = name, 
          tippy(name, tooltip = "This is a really, really long tooltip")))
}

ui <- fluidPage(
  
  sidebarPanel(
 
    fluidRow(column(6,
      jqui_sortable(div(id = "row_source", lapply(dummy, rowBlocks, 
                                                  data = dummy), 
                        style = "5px;max-height: 100px;border: 1px solid black;overflow-y:scroll;"),
                    options = list(connectWith = "#row_dest"))
    )
    )
  )
)


server <- function(input, output, session) {
  
}

shinyApp(ui, server)

If I understand correctly there is no way to control the height and width of the tippy() pop up box. Am I right or did I miss something?

Many thanks in advance!

Spoke too soon. I recently closed #30 but have run into an issue with text overflowing as noted in #11.

There was a solution for shiny scenarios in #13, but I am looking to fix this within an RMarkdown HTML output. Again, I was hoping to use the stable release if possible.

Thanks

Hi and thanks again for the package.

It appears that tippy_this doesn't work with all widgets:

library(shiny)
library(tippy)
shinyApp(
  ui = fluidPage(
    
    textInput('text', 'Text'),
    tippy_this('text', tooltip = 'tiiiip'),
    
    selectInput('select', 'Select', c('a', 'b')),
    tippy_this('select', tooltip = 'tiiiip'),
    
    numericInput('numeric', 'Numeric', NULL),
    tippy_this('numeric', tooltip = 'tiiiip'),
    
    radioButtons('radio', 'Radio', c('a', 'b')),
    tippy_this('radio', tooltip = 'tiiiip'),
    
    checkboxInput('check', 'Check'),
    tippy_this('check', tooltip = 'tiiiip'),
    
    actionButton('action', 'Action'),
    tippy_this('action', tooltip = 'tiiiip'),
    
    sliderInput('slider', 'Slider', 0, 1, 0.5),
    tippy_this('slider', tooltip = 'tiiiip'),
    
    dateInput('date', 'Date'),
    tippy_this('date', tooltip = 'tiiiip')
    
  ),
  server = function(input, output) {}
)

selectInput and sliderInput don't have tippy tips.

Cheers

Tooltip works, but none of the options is effective; placement or theme are not used

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
    h1("Tipply options do not work"),
    with_tippy(textInput("input", "input with tooltip"), 
       "Input text", placement = "bottom", theme = "light"
     )

  ),
  server = function(input, output) {}
)

library(shiny)
library(tippy)

shinyApp(
  ui = fluidPage(
    h1("Tipply options do not work"),
    with_tippy(textInput("input", "input with tooltip"), 
       "Input text", placement = "bottom", theme = "light"
     )
  ),
  server = function(input, output) {}
)

R version 4.1.0 (2021-05-18)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19042)

Matrix products: default

locale:
[1] LC_COLLATE=German_Germany.1252  LC_CTYPE=German_Germany.1252   
[3] LC_MONETARY=German_Germany.1252 LC_NUMERIC=C                   
[5] LC_TIME=German_Germany.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] tippy_0.1.0 shiny_1.6.0

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.6             withr_2.4.2            digest_0.6.27          later_1.2.0           
 [5] mime_0.11              R6_2.5.0               jsonlite_1.7.2         lifecycle_1.0.0       
 [9] xtable_1.8-4           magrittr_2.0.1         cachem_1.0.5           rlang_0.4.11.9000     
[13] cli_2.5.0              promises_1.2.0.1       jquerylib_0.1.4        bslib_0.2.5.9002      
[17] ellipsis_0.3.2         tools_4.1.0            htmlwidgets_1.5.3.9000 yaml_2.2.1            
[21] httpuv_1.6.1           fastmap_1.1.0          compiler_4.1.0         htmltools_0.5.1.9005  
[25] sass_0.4.0 

I want to create an actionButton with tippy inside insertUI, unfortunately I can't get it working. I've tried the following approaches, without success.

library(shiny)
library(tippy)
shinyApp(
  ui = basicPage(
    actionButton("add", "Add ui")
  ),
  
  server = function(input, output) {
    observeEvent(input$add, {
      insertUI(
        "#add",
        "afterEnd",
        tagList(
          tippy::tippy(
            actionButton("button1", "tippy"),
            "Tooltip 1"
          ),
          actionButton("button2", "tippyThis"),
          tippy::tippyThis("button2", "Tooltip 2")
        )
      )
    })
  }
)

This was tested with version 1.0.0.

In CRAN version 0.0.1 both approaches (their corresponsing versions) seem to work.

library(shiny)
library(tippy)
shinyApp(
  ui = basicPage(
    actionButton("add", "Add ui")
  ),
  
  server = function(input, output) {
    observeEvent(input$add, {
      insertUI(
        "#add",
        "afterEnd",
        tagList(
          tippy::with_tippy(
            actionButton("button1", "with_tippy working"),
            "Tooltip 1"
          ),
          actionButton("button2", "tippy_this not working"),
          tippy::tippy_this("button2", "Tooltip 2")
        )
      )
    })
  }
)

Is it possible to add tooltips to elements created by insertUI using tippy 1.0.0?

I tried to test demo code and get these errors:

Error in with_tippy(textInput("text", "Text"), tooltip = "TEXT") :
could not find function "with_tippy"

Error in tippy_class("tip", content = "Tooltip") :
could not find function "tippy_class"

Will be happy to fix it in some way

Thanks
Andrii

Refer app code here.

The Problem:

1. Tooltip come once but when selection is changed in the selectize box tooltips disapper.
2. I tried with renderTippy function also. In this case when selectize is selected nothing renders

Link here for example - https://rstudio.cloud/project/2498232
Code below

library(shiny)
library(tippy)

ui <- fluidPage(

    # Application title
    titlePanel("Tippy Bug"),
    selectizeInput("dataset_selection", "Select Dataset", choices = c("iris" , "airquality")  ,
                   multiple = FALSE, width = 400 , options = NULL ),
    uiOutput("conditional_checkboxes")
  )
server <- function(input, output) {
    names <- list("iris" , "airquality")
    data_r <- reactiveValues(name = names(1) , ds = iris)
    observe({
        data_r$name <- input$dataset_selection
        if(data_r$name == "iris"){
            data_r$ds  <- iris
        }else{
            data_r$ds  <- airquality
        }
    })
   output$conditional_checkboxes <- renderUI({
        pretty_names <- snakecase::to_snake_case(colnames(data_r$ds ))
        dq <- SmartEDA::ExpData(data_r$ds  , type = 2)
        dq$pretty_name <- pretty_names
        lapply(1:nrow(dq), function(i){
            ids <- paste0(data_r$name ,  "_" , i)
            print(ids)
            cb <- create_pretty_checkbox_with_tippy(id = ids , dq[i,])
            })
    })
}
create_pretty_checkbox_with_tippy <- function(id , dq , missing_threshhold = 0.0){
    x <- dq$Per_of_Missing
    missing <- case_when(
        x > missing_threshhold ~ "high" ,
        TRUE  ~ "low")
    if("high" == missing){
        ui <- tippy::with_tippy(
            element =  shinyWidgets::prettyCheckbox( inputId = id , label = dq$pretty_name , value = FALSE , shape = "curve" , status = "danger" , inline = TRUE ) ,
            tooltip = glue::glue("<strong> missing {x * 100}% </strong> of values") ,
            allowHTML = TRUE
        )
    }else{
        ui <-tippy::with_tippy(
            element = shinyWidgets::prettyCheckbox( inputId = id , label = dq$pretty_name , value = TRUE , shape = "curve", status = "success" ,  inline = TRUE) ,
            tooltip = glue::glue("type: {dq$Variable_Type}" ) ,
            allowHTML = TRUE
        )
    }
    ui
}
shinyApp(ui = ui, server = server)

Thank you for the package ，This package is very useful for me. Thank you again!
When my UI part is leaning to the side, it cannot be displayed accurately on top of the UI part ，I just follow the example to write my code

Hi John! there is a way to include a plot in a tooltip using your package ?
Thank you

In conjunction with plotOutput("plot", hover = clickOpts("hover")), it'd be cool if you could place a tooltip on a plot, using input$hover$coords_img to place it exactly where the mouse is. Is this something that tippy.js supports?