alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

Tooltips (#2670)

Browse Source 
* inflect

* diagram

* tooltip render

* tooltip property

* add guard

* tooltip docs

* docs

* tidy, fix horizontal

* words, removed comment

* fix screenshot render

* simplify

* simfplify

* changelog

* simplify optimize

* inflect tests

* Apply suggestions from code review

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

* docstring

* disable auto focus

* should be fraction

* optimization

* snapshot update

* Update tests/snapshot_tests/snapshot_apps/scroll_to_center.py

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>

---------

Co-authored-by: Rodrigo Girão Serrão <5621605+rodrigogiraoserrao@users.noreply.github.com>
This commit is contained in:
Will McGugan
2023-05-30 16:14:31 +01:00
committed by GitHub
parent 83c83de78b
commit 149c39c86c
20 changed files with 478 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docs/guide/widgets.md
View File

@@ -193,6 +193,58 @@ Let's modify the default width for the fizzbuzz example. By default, the table w
Note that we've added `expand=True` to tell the `Table` to expand beyond the optimal width, so that it fills the 50 characters returned by `get_content_width`.
## Tooltips
Widgets can have *tooltips* which is content displayed when the user hovers the mouse over the widget.
You can use tooltips to add supplementary information or help messages.
!!! tip
It is best not to rely on tooltips for essential information.
Some users prefer to use the keyboard exclusively and may never see tooltips.
To add a tooltip, assign to the widget's [`tooltip`][textual.widgets.Widget.tooltip] property.
You can set text or any other [Rich](https://github.com/Textualize/rich) renderable.
The following example adds a tooltip to a button:
=== "tooltip01.py"
```python title="tooltip01.py"
--8<-- "docs/examples/guide/widgets/tooltip01.py"
```
=== "Output (before hover)"
```{.textual path="docs/examples/guide/widgets/tooltip01.py"}
```
=== "Output (after hover)"
```{.textual path="docs/examples/guide/widgets/tooltip01.py" hover="Button"}
```
### Customizing the tooltip
If you don't like the default look of the tooltips, you can customize them to your liking with CSS.
Add a rule to your CSS that targets `Tooltip`. Here's an example:
=== "tooltip02.py"
```python title="tooltip02.py" hl_lines="15-19"
--8<-- "docs/examples/guide/widgets/tooltip02.py"
```
=== "Output (before hover)"
```{.textual path="docs/examples/guide/widgets/tooltip02.py"}
```
=== "Output (after hover)"
```{.textual path="docs/examples/guide/widgets/tooltip02.py" hover="Button"}
```
## Line API