improve tooltip documentation; make text optional

nicegui/elements/tooltip.py

@@ -3,12 +3,14 @@ from .mixins.text_element import TextElement
 
 class Tooltip(TextElement):
 
-    def __init__(self, text: str) -> None:
+    def __init__(self, text: str = '') -> None:
         """Tooltip
 
         This element is based on Quasar's `QTooltip <https://quasar.dev/vue-components/tooltip>`_ component.
-        It be placed in another element to show additional information on hover.
+        It can be placed in another element to show additional information on hover.
 
-        :param text: the content of the tooltip
+        Instead of passing a string as the first argument, you can also nest other elements inside the tooltip.
+
+        :param text: the content of the tooltip (default: '')
         """
         super().__init__(tag='q-tooltip', text=text)

website/documentation/content/section_page_layout.py

@@ -4,7 +4,7 @@ from . import (card_documentation, carousel_documentation, column_documentation,
                dialog_documentation, doc, expansion_documentation, grid_documentation, menu_documentation,
                notification_documentation, notify_documentation, pagination_documentation, row_documentation,
                scroll_area_documentation, separator_documentation, splitter_documentation, stepper_documentation,
-               tabs_documentation, timeline_documentation)
+               tabs_documentation, timeline_documentation, tooltip_documentation)
 
 doc.title('Page *Layout*')
 
@@ -71,19 +71,7 @@ doc.intro(carousel_documentation)
 doc.intro(pagination_documentation)
 doc.intro(menu_documentation)
 doc.intro(context_menu_documentation)
-
-
-@doc.demo('Tooltips', '''
-    Simply call the `tooltip(text:str)` method on UI elements to provide a tooltip.
-
-    For more artistic control you can nest tooltip elements and apply props, classes and styles.
-''')
-def tooltips_demo():
-    ui.label('Tooltips...').tooltip('...are shown on mouse over')
-    with ui.button(icon='thumb_up'):
-        ui.tooltip('I like this').classes('bg-green')
-
-
+doc.intro(tooltip_documentation)
 doc.intro(notify_documentation)
 doc.intro(notification_documentation)
 doc.intro(dialog_documentation)

website/documentation/content/tooltip_documentation.py

@@ -0,0 +1,37 @@
+from nicegui import ui
+
+from . import doc
+
+
+@doc.demo(ui.tooltip)
+def tooltips_demo():
+    with ui.button(icon='thumb_up'):
+        ui.tooltip('I like this').classes('bg-green')
+
+
+@doc.demo('Tooltip method', '''
+    Instead of nesting a tooltip element inside another element, you can also use the `tooltip` method.
+''')
+def tooltip_method_demo():
+    ui.label('Tooltips...').tooltip('...are shown on mouse over')
+
+
+@doc.demo('Tooltip with HTML', '''
+    You can use HTML in tooltips by nesting a `ui.html` element.
+''')
+def tooltip_html_demo():
+    with ui.label('HTML...'):
+        with ui.tooltip():
+            ui.html('<b>b</b>, <em>em</em>, <u>u</u>, <s>s</s>')
+
+
+@doc.demo('Tooltip with other content', '''
+    You can use HTML in tooltips.
+''')
+def tooltip_html_demo():
+    with ui.label('Mountains...'):
+        with ui.tooltip().classes('bg-transparent'):
+            ui.image('https://picsum.photos/id/377/640/360').classes('w-64')
+
+
+doc.reference(ui.tooltip)