Metronic 5 Tooltip无法正常显示问题求助

Hey there! Let's troubleshoot why your Metronic 5 tooltip isn't appearing even though the hover trigger works but the show class isn't being added. Here are the key checks and fixes to try:

1. Ensure Tooltip Initialization Script is Loaded Correctly #

Metronic 5 wraps Bootstrap's tooltip component into its m-tooltip variant, which requires explicit initialization.

• First, confirm you've included the necessary dependencies: jQuery (Metronic relies on it) and Metronic's UI scripts (usually assets/js/scripts.bundle.js or the specific tooltip component script).
• Add initialization code after the DOM is ready. You can either initialize specific elements or use the global Metronic helper:

  // Option 1: Initialize all m-tooltip elements
  $(document).ready(function() {
      $('[data-toggle="m-tooltip"]').tooltip({
          placement: 'top', // Adjust placement as needed
          trigger: 'hover' // Ensure trigger matches your use case
      });
  });
  
  // Option 2: Use Metronic's global initialization (if your template includes it)
  $(document).ready(function() {
      KTTooltip.init();
  });
  

2. Verify CSS Dependencies Are Complete #

The show class controls the tooltip's visibility via opacity:1, so make sure you haven't missed Metronic's core CSS:

• Ensure you've included assets/css/style.bundle.css (or the component-specific tooltip CSS) in your page. This file contains the critical style rule:

  .tooltip.show {
      opacity: 1;
      pointer-events: auto;
  }
  

• If you've added custom CSS, double-check that you aren't overriding this rule accidentally.

3. Check for Dynamic Element Issues #

If your tooltip element is added to the page dynamically (via AJAX, JS rendering, etc.), the initial DOM-ready initialization won't pick it up. Fix this by either:

• Using event delegation to initialize tooltips on hover:

  $(document).on('mouseenter', '[data-toggle="m-tooltip"]', function() {
      $(this).tooltip('show');
  });
  $(document).on('mouseleave', '[data-toggle="m-tooltip"]', function() {
      $(this).tooltip('hide');
  });
  

• Re-initializing the tooltip right after the dynamic element is added to the DOM:

  // After adding your dynamic element
  $('#new-dynamic-element').tooltip();
  

4. Rule Out JavaScript Conflicts #

• Check your browser's console for errors (like $ is not defined or tooltip is not a function). These usually mean jQuery is missing or loaded after Metronic's scripts, or there's a version conflict (only include one jQuery instance).
• Ensure no other scripts are overriding the tooltip plugin or modifying the show class behavior.

5. Inspect Z-Index and Element Positioning #

Sometimes the tooltip is rendered but hidden behind other elements. Open your browser's dev tools, locate the generated .tooltip element, and:

• Check its z-index (Metronic defaults to 1070 for tooltips; adjust if needed):

  .tooltip {
      z-index: 1070 !important;
  }
  

• Verify it's not positioned outside the viewport or clipped by a parent element with overflow:hidden.

Start with the initialization and dependency checks first—those are the most common culprits for this issue!

内容的提问来源于stack exchange，提问作者Pritpal Singh