Nuxt•14mo ago

NuxtUI Tooltip/Popover not rendering on live website

I'm using NuxtUI's UTooltip/UPopover elements to render information on my website:

<UTooltip :ui="{ base: 'h-fit overflow-visible whitespace-normal' }" :popper="{ placement: 'top' }"
        text="...">
        <UIcon name="mdi:information-variant-circle-outline" class="w-8 h-8 text-es-turqoise-600" />
      </UTooltip>

<UTooltip :ui="{ base: 'h-fit overflow-visible whitespace-normal' }" :popper="{ placement: 'top' }"
        text="...">
        <UIcon name="mdi:information-variant-circle-outline" class="w-8 h-8 text-es-turqoise-600" />
      </UTooltip>

<UTooltip :ui="{ base: 'h-fit overflow-visible whitespace-normal' }" :popper="{ placement: 'top' }"
        text="...">
        <UIcon name="mdi:information-variant-circle-outline" class="w-8 h-8 text-es-turqoise-600" />
      </UTooltip>

<UTooltip :ui="{ base: 'h-fit overflow-visible whitespace-normal' }" :popper="{ placement: 'top' }"
        text="...">
        <UIcon name="mdi:information-variant-circle-outline" class="w-8 h-8 text-es-turqoise-600" />
      </UTooltip>

However, for some reason, both the Tooltip and Popover elements do not render the actual tooltips/popovers when I hover over them with my mouse. On my local environment, this works.

Looking into the inspector, I was able to see this difference (see images).

The local environment has the

v-if

v-if

v-if

v-if (which is part of the component itself), but the website on production doesn't.

What's causing this?

kapa.ai•11/13/24, 6:31 PM

Hi @Viridian. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•11/13/24, 6:31 PM

----------------------
Based on the information provided in your question and the knowledge sources available, it appears you're experiencing an issue with NuxtUI's UTooltip and UPopover components not rendering correctly on your production website. This problem seems similar to an issue reported in the Nuxt GitHub repository. Let's analyze the possible causes and solutions:

1. Production Build Issue:
The problem you're describing is likely related to the production build process. As you mentioned, the components work fine in your local environment but fail to render properly on the live website. This suggests that there might be an issue with how the components are being processed or optimized during the build for production.

2. Missing v-if Directive:
You've observed that the

v-if

v-if

directive is present in your local environment but missing in the production build. This is a crucial detail, as the

v-if

v-if

directive is typically used to conditionally render elements. Its absence in production could explain why the tooltips/popovers are not appearing.

3. Possible Cause:
While I don't have enough information to pinpoint the exact cause, this issue resembles a problem reported in the Nuxt GitHub repository where icons were not rendering on production builds when mounting Nuxt GitHub Issue (https://github.com/nuxt/nuxt/issues/29387). Although the issue is about icons, it could be related to how components are processed during the build.

kapa.ai•11/13/24, 6:31 PM

4. Potential Solutions:
a. Check your build configuration: Ensure that your production build process is not inadvertently removing or optimizing out important directives like

v-if

v-if

.

b. Update dependencies: Make sure you're using the latest versions of Nuxt and NuxtUI, as there might have been fixes for similar issues in recent updates.

c. Investigate build output: Compare the built files between your local and production environments to see if there are any significant differences in how the UTooltip and UPopover components are being rendered.

5. Additional Considerations:
- Check if there are any JavaScript errors in the console on your production site that might be preventing the components from initializing properly.
- Verify that all required assets and dependencies are being loaded correctly on the production site.

6. Seeking Further Assistance:
If the problem persists after trying these solutions, you may want to create a minimal reproduction of the issue and report it to the Nuxt or NuxtUI GitHub repositories. As suggested in the Nuxt documentation on reporting bugs (https://nuxt.com/docs/community/reporting-bugs#figure-out-what-the-cause-might-be), try to identify whether the issue is specific to Nuxt, NuxtUI, or possibly an upstream dependency.

Remember to provide detailed information about your environment, Nuxt version, and any relevant configuration when seeking help or reporting the issue.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•11/13/24, 6:31 PM

@173158033742888961 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ViridianOP•11/13/24, 7:49 PM

Would like some help on this, it's a very strange issue

VViridian I'm using NuxtUI's UTooltip/UPopover elements to render information on my websit...

ViridianOP•11/13/24, 8:55 PM

I did some more testing, and as you can see on the images, the eventevent tag is present on the local environment but not on the productionproduction environment. The eventevent tag contains these:

ViridianOP•11/13/24, 8:56 PM

For some reason, the events are removed from the Tooltip/Popover components in the production build while they are still there locally

ViridianOP•11/13/24, 9:01 PM

...This actually also happens on my UFormUForm component as well

ViridianOP•11/13/24, 9:18 PM

The issue was a faulty nuxt.config.ts!

ViridianOP•10/17/25, 6:28 AM

@kapa.ai - My UPopover components have mode="hover"mode="hover" on them which works fine on PC but doesn't seem to work on mobile, where users have to tap on the actual popover element to have it appear, but instead does nothing when users do click on it. How can I fix this? Here is an example:

 -          <template #hint>
    66 -            <UPopover mode="hover" :content="{ side: 'top' }">
    67 -              <UIcon name="mdi:help-circle-outline" class="w-5 h-5 text-es-turqoise-600" />
    68 -
    69 -              <template #content>
    70 -                <div class="px-2 py-1 max-w-xs">
    71 -                  <p class="text-xs font-normal m-0 leading-tight">
    72 -                    Kijk op je recente energiefactuur voor een overzicht.

 -          <template #hint>
    66 -            <UPopover mode="hover" :content="{ side: 'top' }">
    67 -              <UIcon name="mdi:help-circle-outline" class="w-5 h-5 text-es-turqoise-600" />
    68 -
    69 -              <template #content>
    70 -                <div class="px-2 py-1 max-w-xs">
    71 -                  <p class="text-xs font-normal m-0 leading-tight">
    72 -                    Kijk op je recente energiefactuur voor een overzicht.

kapa.ai•10/17/25, 6:28 AM

Let me check the knowledge base for you again. One moment! :books:

kapa.ai•10/17/25, 6:28 AM

----------------------
The behavior you're experiencing is expected: when using mode="hover"mode="hover" with UPopoverUPopover, the popover is triggered by mouse hover events, which are not available on most mobile devices. On mobile, "hover" interactions typically do not work, and as a result, the popover does not appear when users tap the element.

The NuxtUI documentation notes that when mode="hover"mode="hover" is used, the underlying component is Reka UI's HoverCardHoverCard, which is designed for pointer (mouse) interactions and not for touch events on mobile devices. There is no mention in the documentation of automatic fallback to click/tap on mobile, nor a built-in way to make mode="hover"mode="hover" work on mobile devices with touch events Popover Usage.

How to fix this:

- Use mode="click"mode="click" for popovers that need to work on both desktop and mobile. This will allow users to tap the icon to open the popover on mobile, and click to open it on desktop.

Example:

<UPopover mode="click" :content="{ side: 'top' }">
  <UIcon name="mdi:help-circle-outline" class="w-5 h-5 text-es-turqoise-600" />
  <template #content>
    <div class="px-2 py-1 max-w-xs">
      <p class="text-xs font-normal m-0 leading-tight">
        Kijk op je recente energiefactuur voor een overzicht.
      </p>
    </div>
  </template>
</UPopover>

<UPopover mode="click" :content="{ side: 'top' }">
  <UIcon name="mdi:help-circle-outline" class="w-5 h-5 text-es-turqoise-600" />
  <template #content>
    <div class="px-2 py-1 max-w-xs">
      <p class="text-xs font-normal m-0 leading-tight">
        Kijk op je recente energiefactuur voor een overzicht.
      </p>
    </div>
  </template>
</UPopover>

This approach is recommended for accessibility and consistent behavior across devices Popover Usage.

If you want to keep hover on desktop and click on mobile, you would need to implement custom logic to switch the mode based on device type, but this is not covered in the official documentation.

Summary:
Switch your UPopoverUPopover to mode="click"mode="click" for mobile compatibility, as mode="hover"mode="hover" is not supported on touch devices according to the NuxtUI documentation.

kapa.ai•10/17/25, 6:28 AM

Popover Usage
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•10/17/25, 6:28 AM

@173158033742888961 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

NuxtUI Tooltip/Popover not rendering on live website

Similar Threads

Similar Threads

Similar Threads