diff --git a/README.md b/README.md index 533723b..70b6347 100644 --- a/README.md +++ b/README.md @@ -97,8 +97,25 @@ Use input tooltips conservatively. Add them only when a control represents a non - Give icon-only triggers a short accessible `title`. - Add a small spacing utility such as `class = "ms-1"` so the icon remains visually separate from the label. - Support hover, keyboard focus, and click/touch with `options = list(trigger = "hover focus click")`. +- Use a light tooltip theme with a white background, dark text, and a subtle border or shadow. - Test the icon at normal and narrow widths and verify the interaction directly in the running app. +Configure the light tooltip appearance once in the app theme: + +```r +apptheme <- bs_theme( + "tooltip-bg" = "$white", + "tooltip-color" = "$body-color", + "tooltip-opacity" = 1 +) |> + bs_add_rules( + ".tooltip-inner { + border: 1px solid $border-color; + box-shadow: $box-shadow-sm; + }" + ) +``` + Use this pattern, adapting the outer wrapper to the existing label: ```r diff --git a/lorenz-attractor/app.R b/lorenz-attractor/app.R index 21b19e6..16159f1 100644 --- a/lorenz-attractor/app.R +++ b/lorenz-attractor/app.R @@ -8,7 +8,17 @@ library(markdown) library(shinyWidgets) # theme options ----------------------------------------------------------- -apptheme <- bs_theme() +apptheme <- bs_theme( + "tooltip-bg" = "$white", + "tooltip-color" = "$body-color", + "tooltip-opacity" = 1 +) |> + bs_add_rules( + ".tooltip-inner { + border: 1px solid $border-color; + box-shadow: $box-shadow-sm; + }" + ) sidebar <- purrr::partial(bslib::sidebar, width = 300)