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

Jump to bottom

Tooltip doesn't disappear when changing tabs #1949

Open
falkoschindler opened this issue Nov 3, 2023 Discussed in #1942 · 1 comment
Open

Tooltip doesn't disappear when changing tabs #1949

falkoschindler opened this issue Nov 3, 2023 Discussed in #1942 · 1 comment
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@falkoschindler
Copy link
Contributor

Discussed in #1942

Originally posted by snowbollaanm November 2, 2023
Hi I have encountered an issue with tooltips and tabs.

I have made a button that when pressed switches to the next tab panel. However, I gave that button a tooltip and discovered a bug that when the tab changes and you leave your cursor in the position of the button for about half a second the tooltip becomes persistent and no longer goes away until you put your cursor back over the button on the original tab.

from nicegui import ui

def switchTab():
    tabs = [tabOne, tabTwo]
    currentTab = testTabPanels.value

    if currentTab in tabs:
        changeTab = 1 - tabs.index(currentTab)
        testTabPanels.set_value(tabs[changeTab])

with ui.tabs() as testTabs:
    tabOne = ui.tab(1)
    tabTwo = ui.tab(2)

with ui.tab_panels(testTabs, value=tabOne) as testTabPanels:
    with ui.tab_panel(tabOne):
        ui.label('Tab One')
        with ui.button('switch tab', on_click=lambda: switchTab()):
            ui.tooltip('This is a tooltip').classes('text-body2')
    with ui.tab_panel(tabTwo):
        ui.label('Tab Two')
        ui.button('This button has NO tooltip', on_click=lambda: switchTab())

ui.run()

Screenshot 2023-11-02 134521
tooltipBug screenshot1
@falkoschindler falkoschindler added the bug Something isn't working label Nov 3, 2023
@falkoschindler
Copy link
Contributor Author

Here is a minimal reproduction:

with ui.tab_panels(value='1') as tabs:
    with ui.tab_panel('1'):
        ui.label('Tab 1')
        ui.button('Go to 2', on_click=lambda: tabs.set_value('2')).tooltip('Tooltip')
    with ui.tab_panel('2'):
        ui.label('Tab 2')
        ui.button('Back to 1', on_click=lambda: tabs.set_value('1'))

First I thought it might be a bug in Quasar, but a plain Quasar app works correctly:

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/quasar@2.13.0/dist/quasar.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="q-app">
      <q-tab-panels v-model="tab">
        <q-tab-panel name="1">
          <div>Tab 1 content</div>
          <q-btn label="Go to 2" @click="tab = '2'"><q-tooltip>Go to Tab 2</q-tooltip></q-btn>
        </q-tab-panel>
        <q-tab-panel name="2">
          <div>Tab 2 content</div>
          <q-btn label="Back to 1" @click="tab = '1'" />
        </q-tab-panel>
      </q-tab-panels>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@2.13.0/dist/quasar.umd.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return { tab: "1" };
        },
        setup() {
          return {};
        },
      });
      app.use(Quasar);
      app.mount("#q-app");
    </script>
  </body>
</html>

@falkoschindler falkoschindler added the help wanted Extra attention is needed label Apr 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@falkoschindler