jquery，qtip ...为什么我的工具提示不起作用？答案

【问题标题】：jquery, qtip...why isn't my tooltip working?jquery，qtip ...为什么我的工具提示不起作用？
【发布时间】：2013-09-10 23:43:39
【问题描述】：

这是我的代码：

<!DOCTYPE html>
 <html>
  <head>
   <script type="text/javascript" src="libraries/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="libraries/jquery.qtip-1.0.0-rc3.min.js"></script>
   <script>

     $('a_tip').qtip({
     content: 'This is an active list element',
     show: 'mouseover',
     hide: 'mouseout'
      })

   </script>
  </head>
<body>

 <div id = "a_tip">
  Want a tip?
 </div>

</body>

我的 jquery 和 qtip 库位于正确的位置 - chrome 控制台中完全没有错误。我按照qtip网站上的教程尽了最大努力，但看不出我错在哪里。我想要的只是当光标放在“想要提示？”时显示工具提示。感谢您的帮助！

【问题讨论】：

标签： jquery qtip

【解决方案1】：

当 DOM 准备好并且您缺少 # 作为 id 选择器时，您必须添加代码，请尝试以下操作：

<script>
 $(function(){//When DOM is ready
    $('#a_tip').qtip({
      content: 'This is an active list element',
      show: 'mouseover',
      hide: 'mouseout'
    });
 });

</script>

还添加以下样式以使 qTip 出现：

<style>
  #a_tip{
     display:inline
  }
</style>

【讨论】：

谢谢你 - 缺少 id 选择器和 $(function() 我确定是问题的一部分......但它仍然无法正常工作。控制台中没有错误。也许我必须在
部分添加更多内容。我会继续寻找......
一切似乎都很好，也许你可以迁移到 qTip2，qTip 的 1 版和 jQuery 的 1.3 版已经过时，不再维护了
我创建了一个小提琴：jsfiddle.net/rf90210/LfBzy 提示正在工作，但它显示在 div 的右侧，我必须设置 display:inline 的样式才能显示 qtip。您可以配置 qTip 的定位以避免添加此样式
啊！这是css做的，谢谢。现在它起作用了。我根本没有CSS。我不得不说，qtip 的“教程”可能会好很多。在您的答案中添加“显示：内联”评论，我很乐意接受。工具提示在小提琴中缺少 div 定义的边框；像这样定义时完美运行：#a_tip{ display:inline;} 谢谢！

【解决方案2】：

您使用了错误的选择器。您需要使用#id 选择器。

$('#a_tip').qtip({ ... });

其次，要确保#a_tip在你做的时候存在，你需要在DOMReady事件上做。

$().ready(function() {
    $('#a_tip').qtip({ ... });
});

【讨论】：

为此干杯；同时有两个完全相同的cmets！如上所述，仍然无法正常工作。我会再研究一下，或者如果你自己有什么想法......