Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

tooltips in compound widgets #2801

Merged
merged 3 commits into from
Jun 19, 2023
Merged

tooltips in compound widgets #2801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
95f016c
tooltips in compound widgets
willmcgugan Jun 19, 2023
b5c6756
snapshot tweak
willmcgugan Jun 19, 2023
e40e088
test fixes
willmcgugan Jun 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](http://keepachangelog.com/)
and this project adheres to [Semantic Versioning](http://semver.org/).

## Unreleased

### Changed

- Tooltips are now inherited, so will work with compound widgets

## [0.28.0] - 2023-06-19

### Added
Expand All @@ -18,7 +24,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
- Added `origin_visible` parameter to `Widget.scroll_to_region`
- Added `origin_visible` parameter to `Widget.scroll_to_center`
- Added `TabbedContent.tab_count` https://github.com/Textualize/textual/pull/2751
- Added `TabbedContnet.add_pane` https://github.com/Textualize/textual/pull/2751
- Added `TabbedContent.add_pane` https://github.com/Textualize/textual/pull/2751
- Added `TabbedContent.remove_pane` https://github.com/Textualize/textual/pull/2751
- Added `TabbedContent.clear_panes` https://github.com/Textualize/textual/pull/2751
- Added `TabbedContent.Cleared` https://github.com/Textualize/textual/pull/2751
Expand Down
9 changes: 8 additions & 1 deletion src/textual/screen.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -768,7 +768,14 @@ def _handle_tooltip_timer(self, widget: Widget) -> None:
except NoMatches:
pass
else:
tooltip_content = widget.tooltip
tooltip_content: RenderableType | None = None
for node in widget.ancestors_with_self:
if not isinstance(node, Widget):
break
if node.tooltip is not None:
tooltip_content = node.tooltip
break

if tooltip_content is None:
tooltip.display = False
else:
Expand Down
158 changes: 158 additions & 0 deletions tests/snapshot_tests/__snapshots__/test_snapshots.ambr
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26255,6 +26255,164 @@

'''
# ---
# name: test_tooltips_in_compound_widgets
'''
<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
<!-- Generated with Rich https://www.textualize.io -->
<style>

@font-face {
font-family: "Fira Code";
src: local("FiraCode-Regular"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
font-style: normal;
font-weight: 400;
}
@font-face {
font-family: "Fira Code";
src: local("FiraCode-Bold"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
font-style: bold;
font-weight: 700;
}

.terminal-3455460968-matrix {
font-family: Fira Code, monospace;
font-size: 20px;
line-height: 24.4px;
font-variant-east-asian: full-width;
}

.terminal-3455460968-title {
font-size: 18px;
font-weight: bold;
font-family: arial;
}

.terminal-3455460968-r1 { fill: #fea62b }
.terminal-3455460968-r2 { fill: #323232 }
.terminal-3455460968-r3 { fill: #c5c8c6 }
.terminal-3455460968-r4 { fill: #e1e1e1 }
.terminal-3455460968-r5 { fill: #e2e3e3 }
</style>

<defs>
<clipPath id="terminal-3455460968-clip-terminal">
<rect x="0" y="0" width="975.0" height="584.5999999999999" />
</clipPath>
<clipPath id="terminal-3455460968-line-0">
<rect x="0" y="1.5" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-1">
<rect x="0" y="25.9" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-2">
<rect x="0" y="50.3" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-3">
<rect x="0" y="74.7" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-4">
<rect x="0" y="99.1" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-5">
<rect x="0" y="123.5" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-6">
<rect x="0" y="147.9" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-7">
<rect x="0" y="172.3" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-8">
<rect x="0" y="196.7" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-9">
<rect x="0" y="221.1" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-10">
<rect x="0" y="245.5" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-11">
<rect x="0" y="269.9" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-12">
<rect x="0" y="294.3" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-13">
<rect x="0" y="318.7" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-14">
<rect x="0" y="343.1" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-15">
<rect x="0" y="367.5" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-16">
<rect x="0" y="391.9" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-17">
<rect x="0" y="416.3" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-18">
<rect x="0" y="440.7" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-19">
<rect x="0" y="465.1" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-20">
<rect x="0" y="489.5" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-21">
<rect x="0" y="513.9" width="976" height="24.65"/>
</clipPath>
<clipPath id="terminal-3455460968-line-22">
<rect x="0" y="538.3" width="976" height="24.65"/>
</clipPath>
</defs>

<rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-3455460968-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">TooltipApp</text>
<g transform="translate(26,22)">
<circle cx="0" cy="0" r="7" fill="#ff5f57"/>
<circle cx="22" cy="0" r="7" fill="#febc2e"/>
<circle cx="44" cy="0" r="7" fill="#28c840"/>
</g>

<g transform="translate(9, 41)" clip-path="url(#terminal-3455460968-clip-terminal)">
<rect fill="#1e1e1e" x="0" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="36.6" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="48.8" y="1.5" width="341.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="390.4" y="1.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="414.8" y="1.5" width="36.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="451.4" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="463.6" y="1.5" width="97.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="561.2" y="1.5" width="414.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="24.4" y="25.9" width="231.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="256.2" y="25.9" width="719.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="24.4" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="48.8" y="50.3" width="183" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="231.8" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="256.2" y="50.3" width="719.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#24292f" x="24.4" y="74.7" width="231.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="256.2" y="74.7" width="719.8" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="99.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="123.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="147.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="172.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="196.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="221.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="245.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="269.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="294.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="318.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="343.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="367.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="391.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="416.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="440.7" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="465.1" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="489.5" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="513.9" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="538.3" width="976" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="0" y="562.7" width="976" height="24.65" shape-rendering="crispEdges"/>
<g class="terminal-3455460968-matrix">
<text class="terminal-3455460968-r1" x="0" y="20" textLength="36.6" clip-path="url(#terminal-3455460968-line-0)">━━━</text><text class="terminal-3455460968-r2" x="36.6" y="20" textLength="12.2" clip-path="url(#terminal-3455460968-line-0)">╺</text><text class="terminal-3455460968-r2" x="48.8" y="20" textLength="341.6" clip-path="url(#terminal-3455460968-line-0)">━━━━━━━━━━━━━━━━━━━━━━━━━━━━</text><text class="terminal-3455460968-r4" x="414.8" y="20" textLength="36.6" clip-path="url(#terminal-3455460968-line-0)">10%</text><text class="terminal-3455460968-r4" x="463.6" y="20" textLength="97.6" clip-path="url(#terminal-3455460968-line-0)">--:--:--</text><text class="terminal-3455460968-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-3455460968-line-0)">
</text><text class="terminal-3455460968-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-3455460968-line-1)">
</text><text class="terminal-3455460968-r5" x="48.8" y="68.8" textLength="183" clip-path="url(#terminal-3455460968-line-2)">Hello,&#160;Tooltip!</text><text class="terminal-3455460968-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-3455460968-line-2)">
</text><text class="terminal-3455460968-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-3455460968-line-3)">
</text><text class="terminal-3455460968-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-3455460968-line-4)">
</text><text class="terminal-3455460968-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-3455460968-line-5)">
</text><text class="terminal-3455460968-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-3455460968-line-6)">
</text><text class="terminal-3455460968-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-3455460968-line-7)">
</text><text class="terminal-3455460968-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-3455460968-line-8)">
</text><text class="terminal-3455460968-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-3455460968-line-9)">
</text><text class="terminal-3455460968-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-3455460968-line-10)">
</text><text class="terminal-3455460968-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-3455460968-line-11)">
</text><text class="terminal-3455460968-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-3455460968-line-12)">
</text><text class="terminal-3455460968-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-3455460968-line-13)">
</text><text class="terminal-3455460968-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-3455460968-line-14)">
</text><text class="terminal-3455460968-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-3455460968-line-15)">
</text><text class="terminal-3455460968-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-3455460968-line-16)">
</text><text class="terminal-3455460968-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-3455460968-line-17)">
</text><text class="terminal-3455460968-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-3455460968-line-18)">
</text><text class="terminal-3455460968-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-3455460968-line-19)">
</text><text class="terminal-3455460968-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-3455460968-line-20)">
</text><text class="terminal-3455460968-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-3455460968-line-21)">
</text><text class="terminal-3455460968-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-3455460968-line-22)">
</text>
</g>
</g>
</svg>

'''
# ---
# name: test_tree_example
'''
<svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
Expand Down
15 changes: 15 additions & 0 deletions tests/snapshot_tests/snapshot_apps/tooltips.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
from textual.app import App, ComposeResult
from textual.widgets import ProgressBar


class TooltipApp(App[None]):
def compose(self) -> ComposeResult:
progress_bar = ProgressBar(100)
progress_bar.advance(10)
progress_bar.tooltip = "Hello, Tooltip!"
yield progress_bar


if __name__ == "__main__":
app = TooltipApp()
app.run()
12 changes: 12 additions & 0 deletions tests/snapshot_tests/test_snapshots.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,9 +213,11 @@ def test_tabbed_content(snap_compare):
def test_option_list_strings(snap_compare):
assert snap_compare(WIDGET_EXAMPLES_DIR / "option_list_strings.py")


def test_option_list_options(snap_compare):
assert snap_compare(WIDGET_EXAMPLES_DIR / "option_list_options.py")


def test_option_list_tables(snap_compare):
assert snap_compare(WIDGET_EXAMPLES_DIR / "option_list_tables.py")

Expand Down Expand Up @@ -562,3 +564,13 @@ def test_blur_on_disabled(snap_compare):
SNAPSHOT_APPS_DIR / "blur_on_disabled.py",
press=[*"foo", "f3", *"this should not appear"],
)


def test_tooltips_in_compound_widgets(snap_compare):
# https://github.com/Textualize/textual/issues/2641
async def run_before(pilot) -> None:
await pilot.hover("ProgressBar")
await pilot.pause(0.3)
await pilot.pause()

assert snap_compare(SNAPSHOT_APPS_DIR / "tooltips.py", run_before=run_before)