Tooltips for html and markdown elements

[1081]

Please add the possibility to add a tooltip for html and markdown elements.

Example: Custom HTML-label with subscript for a number input in a scientific application.

See also discord question:

[falkoschindler]

Interesting, I never thought about tooltips in ui.html! Currently it doesn't work, because ui.html (as well as ui.markdown and ui.mermaid) are ContentElements that can't nest other NiceGUI elements, but set their inner HTML via the content property. So we basically need to add support for child elements in a content element. Not sure if and how this is possible. But I'll think about it. If anyone has an idea, I'm all ears. 🙂

[falkoschindler]

It seems pretty complicated to add support for nested elements in ContentElements like ui.html and ui.markdown. But there's a pretty simple workaround:

with ui.element():
    ui.html('This is <u>HTML</u>...')
    ui.tooltip('...with a tooltip!')

Or:

with ui.element().tooltip('...with a tooltip!'):
    ui.html('This is <u>HTML</u>...')

This basically wraps the HTML element in a container with a tooltip.