Can't mantain tooltip open when I hover over it

[mariajmoreira]

Description

Hello,
Im trying to create a component that is a div with an icon only, and when hovered will display a tooltip. That tooltip has a button inside it that can't be clicked, because since the tooltips show and hide is controlled by whether the parent is being hovered or not, has soon as I leave the icon to enter the tooltip, the tooltip disappears.
I've tried multiple things one of them being using the tooltip events found the quasar documentation like

self.tooltip.on('before-hide', self.tooltip.props(':model-value="true")

found this codepen with the behavior I need but is not implemented in nicegui, hope it helps tho: https://codepen.io/pierresaid/pen/MWajrrV?editors=1011

class IconTooltip(ui.element):
    
    def __init__(self):
          super().__init__()
          self.classes(f'{Icons.info} text-lg flex items-center')
           with self:
                   self.tooltip = ui.element('q-tooltip')
                   self.tooltip.add_slot('default','''<q-btn>click me</q-btn>)

is there a way through nicegui to make the tooltip stay open when I hover over it?
thank you in advance

[falkoschindler]

Hi @mariajmoreira,

Looking into the documentation of the underlying QTooltip, the only thing I can imagine is to add a delay (in ms) like this:

with ui.label('Hover me'):
    with ui.tooltip().props('hide-delay=1000'):
        ui.label('This is a tooltip')
        ui.button('Ok', on_click=lambda: ui.notify('Ok')).props('size=sm')

But the button is still not clickable.

Maybe a menu is a better choice:

with ui.label('Hover me').on('mouseenter', lambda: menu.open()):
    with ui.menu().on('mouseleave', lambda: menu.close()) as menu:
        with ui.card().classes('bg-gray-600 text-white'):
            ui.label('This is a menu')
            ui.button('Ok', on_click=lambda: ui.notify('Ok'))