Question

我通过我网站上的List Category Posts WordPress插件创建了一个最小化的赞助商部分，其中包含小尺寸（50x50）缩略图（可以看到here）。此插件只会在您网站的任何位置显示某些类别的帖子。

我现在想要在悬停图片时添加工具提示，这实际上会显示帖子the_content();。对于工具提示，我将使用qTip2，因为这似乎是最好的工具提示解决方案。

当悬停时没有任何反应时，我的问题就出现了。你能发现错误吗？我连续3天都在和这个问题作斗争。

在查看HTML时，请想一想，您无法修改它。代码可以在JSFIDDLE找到（我希望代码有效，但我不确定，因为这是我第一次使用JSFIDDLE）。

Answer 1

您遇到的问题是Qtip内容的选择器。您有$(this).next('div:hidden')，但您的文字似乎实际上位于<p>标记中。

编辑：刚看到有关不编辑HTML的部分，您只需修改选择器即可选择下一个<p>标记。像$(this).parent().next('p')[0].textContent，fiddle

这样的东西

编辑2：理想情况下，我会编辑HTML并执行此操作：

通过Qtip2 documentation，作者提供了将所需文本内容放入目标元素属性的解决方案。 Here是证明这一点的小提琴。

相关的HTML：

 <a href="http://dacc.fredrixdesign.com/global-imports-bmw-2/"><img width="50" height="50" src="http://dacc.fredrixdesign.com/wp-content/uploads/bmw-150x150.jpg" class="attachment-50x50 wp-post-image" alt="DACC Sponsor" qtip-content="Hello, I'm text!"/></a>

qTip代码：

 $('.lcp_catlist a img').each(function () {
      $(this).qtip({
           content: $(this).next('div:hidden')
      });
  });

使用qTip2显示HTML

1 个答案: