etiennebacher / prompter

Add tooltips in Shiny apps with hint.css
https://prompter.etiennebacher.com/
Other
41 stars 1 forks source link

Change tooltip color #3

Closed analytichealth closed 2 years ago

analytichealth commented 2 years ago

Hi, the package looks great. Is there any way to change the colours of the tooltips, by adjusting css maybe? Thanks

etiennebacher commented 2 years ago

Hello, yes it is possible through CSS, but only for each tooltip type. You need to specify a type (e.g "error") in add_prompt(), and to include some CSS for this type. For example:

library(prompter)
library(shiny)

ui <- fluidPage(

  use_prompt(),
  tags$head(
    tags$style(
      HTML(
        ".hint--error:after {
          background-color: blue;
          text-shadow: 0 -1px 0px blue;
        }
        .hint--error.hint--bottom:before {
          border-bottom-color: blue
        }
        .hint--error.hint--left:before {
          border-left-color: blue
        }
        .hint--error.hint--top:before {
          border-top-color: blue
        }
        .hint--error.hint--right:before {
          border-right-color: blue
        }"
      )
    )
  ),
  add_prompt(
    actionButton("plot", "click"), 
    position = "bottom", message = "this is a button", type = "error"
  )
)

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

shinyApp(ui, server)

Therefore, for now, you can only have 4 different colors for tooltips at the same time (because there are 4 types).

analytichealth commented 2 years ago

This works great, thank you!