📚 DOCS: Add note on CSS

Author: chrisjsewell

docs/index.md

@@ -72,6 +72,31 @@ Now your website will have tooltips on many of your links!
 
     This is another paragraph
 
+:::{important}
+Dependent on the theme you ar using with sphinx,
+you may need to add some CSS to your `conf.py` to make the tooltips show correctly.
+
+For example, for the [Pydata Sphinx Theme](https://pydata-sphinx-theme.readthedocs.io):
+
+`conf.py`:
+
+```python
+html_static_path = ['_static']
+html_css_files = ["tippy.css"]
+```
+
+`_static/tippy.css`:
+
+```css
+.tippy-box {
+    background-color:var(--pst-color-surface);
+    color:var(--pst-color-text-base);
+    border: 1px solid var(--pst-color-border);
+}
+```
+
+:::
+
 ## How does it work?
 
 The extension uses the [tippy.js](https://atomiks.github.io/tippyjs) library to create tooltips.
@@ -97,7 +122,7 @@ Overrides for the [tippy.js props](https://atomiks.github.io/tippyjs/v6/all-prop
 tippy_props = {"placement": "auto-start", "maxWidth": 500, "interactive": False, "arrow": True}
 ```
 
-Note, only the `placement`, `maxWidth` and `interactive` props are allowed to be overridden currently.
+Note, only the `placement`, `maxWidth`, `theme`, and `interactive` props are allowed to be overridden currently.
 :::
 
 :::{confval} tippy_add_class

src/sphinx_tippy.py

@@ -125,7 +125,7 @@ def compile_config(app: Sphinx):
     props = dict(
         {"placement": "auto-start", "maxWidth": 500, "interactive": False}, **updates
     )
-    if set(props.keys()) - {"placement", "maxWidth", "interactive"}:
+    if set(props.keys()) - {"placement", "maxWidth", "interactive", "theme"}:
         raise ExtensionError(
             "tippy_props can only contain keys 'placement', 'maxWidth', 'interactive'"
         )
@@ -159,6 +159,10 @@ def compile_config(app: Sphinx):
     if not isinstance(props["interactive"], bool):
         raise ExtensionError("tippy_props['interactive'] must be a boolean")
     props["interactive"] = "true" if props["interactive"] else "false"
+    if "theme" in props:
+        if not (props["theme"] is None or isinstance(props["theme"], str)):
+            raise ExtensionError("tippy_props['theme'] must be None or a string")
+        props["theme"] = f"'{props['theme']}'" if props["theme"] else "null"
     app.env.tippy_config = TippyConfig(  # type: ignore[attr-defined]
         props=props,
         custom_tips=app.config.tippy_custom_tips,