From eae5de4d858b5290f23e24842bb5b835f363aa5f Mon Sep 17 00:00:00 2001
From: Joshua Kunst <jbkunst@gmail.com>
Date: Wed, 29 Jul 2026 18:39:40 -0400
Subject: [PATCH 1/2] Use light tooltip styling

---
 lorenz-attractor/app.R | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

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)
 

From 520fd9f5c2ae42db9a5483c25cc5a6211873a9d6 Mon Sep 17 00:00:00 2001
From: Joshua Kunst <jbkunst@gmail.com>
Date: Wed, 29 Jul 2026 18:40:16 -0400
Subject: [PATCH 2/2] Document light tooltip theme

---
 README.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

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