Tooltip Support for marimo.ui.code_editor

[metaboulie]

Description

Description

A new feature to marimo.ui.code_editor to enhance interactivity and usability. This feature would allow users to insert placeholders for identifiers, display tooltips for them, and interact with these identifiers directly within the editor.

---

Proposed API Changes

1. New Parameter: tooltips

   • Type: dict
   • Description: A dictionary where keys are identifiers (e.g., {{identifier}}), and values are the corresponding tooltips (strings or rich content).

2. Enhanced Behavior in value:

   • Identifiers, denoted as {{identifier}}, can be embedded directly in the value.

3. Interactive Feature in Code Editor:

   • For every {{identifier}} in the editor, display a small interactive "+" button next to it.
   • Clicking the "+" button will display the tooltip associated with that identifier.

---

Example Usage

from marimo.ui import code_editor

code = """
def compute(x):
    return {{operation}}(x)
"""

tooltips = {
    "operation": "Specifies the mathematical operation. E.g., 'sin', 'cos', 'log'."
}

code_editor(value=code, tooltips=tooltips)

Expected Behavior:

• The {{operation}} identifier appears in the editor.
• A "+" button is shown next to {{operation}}.
• Clicking the "+" button opens a popup displaying the tooltip: "Specifies the mathematical operation. E.g., 'sin', 'cos', 'log'."

---

Use Cases

1. Enhance code interactivity by providing contextual information.
2. Support for documentation or educational purposes in notebook environments.
3. Simplify complex workflows by embedding guidance directly within the editor.

---

Additional Notes

• Tooltips should support Markdown or basic HTML for rich formatting.

Suggested solution

Screen.Recording.2024-11-18.at.11.46.21.mov

[mscolnick]

It looks like this a mkdocs plugin.

It may be worth looking at their API for consistency, which you tag the location with a comment: # (1)! and # (2)!
https://github.com/Textualize/textual/blob/86fc1054e80e930b2069a7f18c4cdef17afceb9d/docs/examples/guide/widgets/counter02.py#L10

and then reference it later:

1. Associates presses of ++up++ or ++k++ with the `change_count` action, passing `1` as the argument to increment the count. The final argument ("Increment") is a user-facing label displayed in the footer when this binding is active.
2. Called when the binding is triggered. Take care to add the `action_` prefix to the method name.

I wonder if it would make more sense to follow this, which would be a list for tooltips instead of a dictionary, and all the identifiers are 1,2,3 indexed.

---

As far as implementation, this should be possible with a Codemirror decoration plugin, and likely a MatchDecorator