如何用jQuery将图片Caption字段内容移入title或data-tooltip实现悬停提示

Hey there! Great job getting started with the jQuery hover functionality—let's build on that to pull in those image captions you've already set up. Since you're using Semplice on WordPress, we can work within the constraints of global JS/CSS to make this happen.

Step 1: Map Out Your Image Structure #

First, we need to figure out where Semplice stores your image captions. Fire up your browser's dev tools (F12), inspect one of your .semplice-lightbox elements, and look for the caption text. It's probably in a <figcaption> tag inside the lightbox container, or maybe an attribute on the image itself (like data-caption).

Step 2: Write the jQuery to Pull & Assign Captions #

Once you know the selector for your captions, use this code to extract the text and assign it to either a title attribute (for browser-native tooltips) or data-tooltip (for custom styling):

jQuery(document).ready(function($) {
  // Loop through each lightbox image container
  $('.semplice-lightbox').each(function() {
    // Update the selector below to match your caption's actual location
    // Example 1: If caption is in a <figcaption class="image-caption">
    var imageCaption = $(this).find('.image-caption').text().trim();
    
    // Example 2: If caption is stored in the img's data-caption attribute
    // var imageCaption = $(this).find('img').data('caption').trim();

    // Only assign the attribute if there's actual caption text
    if (imageCaption) {
      // Choose either title (native tooltip) or data-tooltip (custom)
      $(this).attr('title', imageCaption);
      // $(this).attr('data-tooltip', imageCaption);
    }
  });

  // If you're using a custom tooltip instead of native title, update your hover logic:
  $('.semplice-lightbox').hover(function() {
    var tooltipText = $(this).attr('data-tooltip');
    // Replace this with your existing tooltip display code (e.g., show a hidden div)
    console.log('Showing tooltip:', tooltipText);
  }, function() {
    // Add your tooltip hide logic here
    console.log('Hiding tooltip');
  });
});

Step 3: Style Custom Tooltips (Optional) #

If you went with data-tooltip instead of the native title, add this CSS to your global styles to make the tooltip look polished:

.semplice-lightbox {
  position: relative;
  /* Ensure the tooltip doesn't disrupt the layout */
}

/* Show tooltip on hover */
.semplice-lightbox[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%; /* Position above the image */
  left: 50%;
  transform: translateX(-50%);
  background-color: #222;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 9999;
}

/* Optional: Add a small arrow below the tooltip */
.semplice-lightbox[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: 102%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #222 transparent transparent transparent;
}

Quick Tips #

• Double-check your caption selector using dev tools—if the class name is different (like semplice-caption), update the code accordingly.
• If you use the native title attribute, you can skip the custom hover logic entirely—browsers will handle showing the tooltip automatically.
• Test on a single page first to make sure everything works before deploying globally.

内容的提问来源于stack exchange，提问作者T S