Tooltip only shows when I reduce browser size

The issue you're experiencing with the tooltip only appearing when you resize the browser window might be related to how the tooltip library is initialized or how it handles reactivity. Here are a few steps you can take to troubleshoot and potentially resolve the issue:

1. Ensure Proper Initialization: Make sure that the floating-vue library is properly initialized in your project. This typically involves importing and using the library in your main JavaScript file. For example:

   import { createApp } from 'vue';
   import App from './App.vue';
   import FloatingVue from 'floating-vue';
   import 'floating-vue/dist/style.css';
   
   const app = createApp(App);
   app.use(FloatingVue);
   app.mount('#app');
   

2. Check for CSS Conflicts: Sometimes, CSS styles can interfere with the display of tooltips. Ensure that there are no CSS rules that might be hiding or affecting the tooltip's visibility.

3. Verify Tooltip Binding: Ensure that the v-tooltip directive is correctly bound to the element. Double-check that the msg variable is correctly defined and reactive if necessary.

4. Inspect Console for Errors: Open the browser's developer console to check for any JavaScript errors or warnings that might provide clues about what's going wrong.

5. Responsive Design Considerations: If the tooltip appears only when resizing, it might be related to responsive design settings or media queries affecting the tooltip's display. Check if there are any media queries in your CSS that might be affecting the tooltip.

6. Update Dependencies: Ensure that all your dependencies, including floating-vue, are up to date. Sometimes, bugs are fixed in newer versions.

7. Test in a Minimal Environment: Create a minimal test case with just the tooltip and see if the issue persists. This can help isolate the problem.

Here's a refined version of your component to ensure everything is set up correctly:

<template>
  <div class="flex space-x-1">
    <!-- 24 hours -->
    <div v-tooltip="msg" class="h-5 w-2 bg-green-500"></div>
  </div>
</template>

<script setup>
const msg = 'This is a tooltip message';
</script>

If none of these steps resolve the issue, consider providing more context or a more detailed code example to further diagnose the problem.