N
Nuxt•3d ago
EmanueleDB

Nuxt UI UTooltip opened by default if its in the #header slot of a UModal

UTooltip opened by default if its in the #header slot of a UModal, the same tooltip in the #footer slot works as expected 
<UModal
          v-model:open="openSettingsModal"
          :close="false"
          :dismissible="false"
          :ui="{
            content: 'dark:bg-gray-800 dark:ring-gray-400'
          }"
        >
          <template #header>
            <div class="flex w-full justify-between items-center">
              <h2>Settings</h2>
              <UTooltip
                text="Virtual Tour"
                :content="{ align: 'center', side: 'top' }"
              >
                <UButton
                  v-if="isActive"
                  icon="mdi:compass-outline"
                  size="md"
                  color="notRequested"
                  variant="solid"
                  class="hidden md:inline-flex"
                  @click="something"
                />
              </UTooltip>
            </div>
          </template>
          <template #body>
...
<UModal
          v-model:open="openSettingsModal"
          :close="false"
          :dismissible="false"
          :ui="{
            content: 'dark:bg-gray-800 dark:ring-gray-400'
          }"
        >
          <template #header>
            <div class="flex w-full justify-between items-center">
              <h2>Settings</h2>
              <UTooltip
                text="Virtual Tour"
                :content="{ align: 'center', side: 'top' }"
              >
                <UButton
                  v-if="isActive"
                  icon="mdi:compass-outline"
                  size="md"
                  color="notRequested"
                  variant="solid"
                  class="hidden md:inline-flex"
                  @click="something"
                />
              </UTooltip>
            </div>
          </template>
          <template #body>
...
3 Replies
kapa.ai
kapa.ai•3d ago
Hi @EmanueleDB. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're experiencing an issue with the UTooltip component being opened by default when it's placed in the #header slot of a UModal, while the same tooltip works as expected in the #footer slot. This behavior is related to how the Nuxt UI Modal component handles its slots and focus management. When a modal opens, it manages focus within its content, which can affect how tooltips behave in different slots. Looking at the documentation, there are a few approaches you can try to fix this issue: 1. Control the tooltip's open state explicitly: You can control the tooltip's open state using the v-model:open directive: 
<UTooltip 
  v-model:open="tooltipOpen" 
  text="Virtual Tour" 
  :content="{ align: 'center', side: 'top' }"
>
  <UButton
    v-if="isActive"
    icon="mdi:compass-outline"
    size="md"
    color="notRequested"
    variant="solid"
    class="hidden md:inline-flex"
    @click="something"
  />
</UTooltip>
<UTooltip 
  v-model:open="tooltipOpen" 
  text="Virtual Tour" 
  :content="{ align: 'center', side: 'top' }"
>
  <UButton
    v-if="isActive"
    icon="mdi:compass-outline"
    size="md"
    color="notRequested"
    variant="solid"
    class="hidden md:inline-flex"
    @click="something"
  />
</UTooltip>
Where tooltipOpen is a ref initialized to false in your setup script. 2. Disable the tooltip initially: You can use the disabled prop to initially disable the tooltip and enable it after the modal is fully rendered: 
<UTooltip
  :disabled="initiallyDisabled"
  text="Virtual Tour"
  :content="{ align: 'center', side: 'top' }"
>
  <!-- Button content -->
</UTooltip>
<UTooltip
  :disabled="initiallyDisabled"
  text="Virtual Tour"
  :content="{ align: 'center', side: 'top' }"
>
  <!-- Button content -->
</UTooltip>
3. Adjust the delay duration: You might want to adjust the delay duration for the tooltip to prevent it from appearing immediately: 
<UTooltip
  :delay-duration="500"
  text="Virtual Tour"
  :content="{ align: 'center', side: 'top' }"
>
  <!-- Button content -->
</UTooltip>
<UTooltip
  :delay-duration="500"
  text="Virtual Tour"
  :content="{ align: 'center', side: 'top' }"
>
  <!-- Button content -->
</UTooltip>
This issue might be related to focus management in the modal. According to the Tooltip documentation, there's a prop called ignoreNonKeyboardFocus that might help: 
<UTooltip
  :ignore-non-keyboard-focus="true"
  text="Virtual Tour"
  :content="{ align: 'center', side: 'top' }"
>
  <!-- Button content -->
</UTooltip>
<UTooltip
  :ignore-non-keyboard-focus="true"
  text="Virtual Tour"
  :content="{ align: 'center', side: 'top' }"
>
  <!-- Button content -->
</UTooltip>
This prevents the tooltip from opening if the focus didn't come from the keyboard, which might be what's happening when the modal opens. If none of these solutions work, you might want to consider wrapping your tooltip in a component that manages its visibility based on the modal's open state or using the programmatic overlay approach described in the Modal documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@650262436557094954> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
EmanueleDB
EmanueleDBOP•3d ago
:ignore-non-keyboard-focus="true" worked

Did you find this page helpful?