JohnCoene / tippy

💬 Tippy.js for Shiny
http://tippy.john-coene.com/
Other
76 stars 2 forks source link

max-width property? #6

Closed MayaGans closed 4 years ago

MayaGans commented 4 years ago

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)
JohnCoene commented 4 years ago

Thanks for sharing this issue Maya!

I just pushed a fix to allow html in tooltips. You'll need to reinstall the Github version.

The snippet below should work after resintall.

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

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 = div(
              "This is a really, really long tooltip",
              style = "max-width:50px;"
            )
          )
      )
    )
}

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)

Let me know if this does not work, please close the issue if it's all good :)

MayaGans commented 4 years ago

Thanks so much for getting back to me so quickly! I first tried running

devtools::update_packages("JohnCoene/tippy")

But got the error

Skipping 1 packages not available: JohnCoene/tippy

So instead I uninstalled and re-installed tippy and started a new R session but when I run your repex it now says "undefined" on hover?

May be of help:

> devtools::session_info()
- Session info ----------------------------------------------------------------------------
 setting  value                       
 version  R version 3.5.2 (2018-12-20)
 os       Windows >= 8 x64            
 system   x86_64, mingw32             
 ui       RStudio                     
 language (EN)                        
 collate  English_United States.1252  
 ctype    English_United States.1252  
 tz       America/Los_Angeles         
 date     2019-12-17                  

- Packages --------------------------------------------------------------------------------
 package     * version date       lib source                          
 assertthat    0.2.1   2019-03-21 [1] CRAN (R 3.5.3)                  
 backports     1.1.5   2019-10-02 [1] CRAN (R 3.5.3)                  
 callr         3.3.2   2019-09-22 [1] CRAN (R 3.5.3)                  
 cli           1.1.0   2019-03-19 [1] CRAN (R 3.5.3)                  
 crayon        1.3.4   2017-09-16 [1] CRAN (R 3.5.2)                  
 desc          1.2.0   2018-05-01 [1] CRAN (R 3.5.3)                  
 devtools      2.2.1   2019-09-24 [1] CRAN (R 3.5.3)                  
 digest        0.6.22  2019-10-21 [1] CRAN (R 3.5.3)                  
 ellipsis      0.3.0   2019-09-20 [1] CRAN (R 3.5.3)                  
 fastmap       1.0.1   2019-10-08 [1] CRAN (R 3.5.3)                  
 fs            1.3.1   2019-05-06 [1] CRAN (R 3.5.3)                  
 glue          1.3.1   2019-03-12 [1] CRAN (R 3.5.3)                  
 htmltools     0.4.0   2019-10-04 [1] CRAN (R 3.5.3)                  
 htmlwidgets   1.5.1   2019-10-08 [1] CRAN (R 3.5.3)                  
 httpuv        1.5.2   2019-09-11 [1] CRAN (R 3.5.3)                  
 jsonlite      1.6     2018-12-07 [1] CRAN (R 3.5.3)                  
 later         1.0.0   2019-10-04 [1] CRAN (R 3.5.3)                  
 magrittr      1.5     2014-11-22 [1] CRAN (R 3.5.3)                  
 memoise       1.1.0   2017-04-21 [1] CRAN (R 3.5.3)                  
 mime          0.7     2019-06-11 [1] CRAN (R 3.5.3)                  
 pkgbuild      1.0.6   2019-10-09 [1] CRAN (R 3.5.3)                  
 pkgload       1.0.2   2018-10-29 [1] CRAN (R 3.5.3)                  
 prettyunits   1.0.2   2015-07-13 [1] CRAN (R 3.5.3)                  
 processx      3.4.1   2019-07-18 [1] CRAN (R 3.5.3)                  
 promises      1.1.0   2019-10-04 [1] CRAN (R 3.5.3)                  
 ps            1.3.0   2018-12-21 [1] CRAN (R 3.5.3)                  
 R6            2.4.0   2019-02-14 [1] CRAN (R 3.5.3)                  
 Rcpp          1.0.2   2019-07-25 [1] CRAN (R 3.5.3)                  
 remotes       2.1.0   2019-06-24 [1] CRAN (R 3.5.3)                  
 rlang         0.4.1   2019-10-24 [1] CRAN (R 3.5.3)                  
 rprojroot     1.3-2   2018-01-03 [1] CRAN (R 3.5.3)                  
 rsconnect     0.8.15  2019-07-22 [1] CRAN (R 3.5.3)                  
 rstudioapi    0.10    2019-03-19 [1] CRAN (R 3.5.3)                  
 sessioninfo   1.1.1   2018-11-05 [1] CRAN (R 3.5.3)                  
 shiny       * 1.4.0   2019-10-10 [1] CRAN (R 3.5.3)                  
 shinyjqui   * 0.3.2   2018-07-25 [1] CRAN (R 3.5.3)                  
 shinyjs     * 1.0     2018-01-08 [1] CRAN (R 3.5.3)                  
 testthat      2.2.1   2019-07-25 [1] CRAN (R 3.5.3)                  
 tippy       * 0.1.0   2019-12-17 [1] Github (JohnCoene/tippy@f9f5f60)
 usethis       1.5.1   2019-07-04 [1] CRAN (R 3.5.3)                  
 withr         2.1.2   2018-03-15 [1] CRAN (R 3.5.3)                  
 xtable        1.8-4   2019-04-21 [1] CRAN (R 3.5.3)                  
 yaml          2.2.0   2018-07-25 [1] CRAN (R 3.5.3)                  

[1] C:/Users/mgans/OneDrive - Biogen/Documents/R/win-library/3.5
[2] C:/Program Files/R/R-3.5.2/library

Hopefully its just a small error on my end, thanks for looking into this and for the great package!!

JohnCoene commented 4 years ago

No problem at all :)

Did you reinstall from Github with remotes or devtools? It looks like you have the CRAN version which would indeed display something like this.

devtools::install_github("JohnCoene/tippy")

or with remotes

remotes::install_github("JohnCoene/tippy")

Then restart your R session.

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

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 = div(
              "This is a really, really long tooltip",
              style = "max-width:50px;"
            )
          )
      )
    )
}

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)

Still have this issue?

MayaGans commented 4 years ago

Woohoo it worked, thanks!

JohnCoene commented 4 years ago

You're welcome, and please don't hesitate to open any other issue you might run into. Happy coding :)