qTip文本提示简单插件不工作

Question

我试图安装一个简单的文本提示jquery称为qtip从以下网站:http://craigsworks.com/projects/qtip2/，没有成功。它根本不工作，我没有得到任何错误。我已经尝试解决这个问题一个多小时了。

我的代码下面有类.something的空白div，我只是试图使用qtip显示任何文本时，框悬停以确认它正在工作。

Javascript

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript" src="jquery.qtip.min.js"></script>
<script>
 $(document).ready(function(){
    $(".myform").validate({
        highlight: function(element, errorClass, validClass) {
             $(element).css('border', '1px solid red');
          },
          unhighlight: function(element, errorClass, validClass) {
             $(element).css('border', '1px solid #ddd');
          },
        messages: {
            first: "Please specify your name",
        }
    });
    $('.something').qtip('hello');
  });
</script>

标记

<form class="myForm" method="post" action="action.php">
    First <input type="text" name="first" class="required"/><br/>
    Last <input type="text" name="last"  /><br/>
    Phone <input type="text" name="phone"  class="required"/><br/>
    <div class="something" style="border:1px solid red; height:150px; width:300px;"></div>
    <input type="submit">
</form>

请告诉我问题出在哪里，我很感激。

提前感谢!

Answer 1

您的工具提示没有显示您所期望的，因为忘记添加标题属性到您的div以及您没有包含qtip 2的css文件。

http://qtip2.com/v/nightly/jquery.qtip.css

只要完成这两个步骤，你的代码就可以工作了。

Demo: http://jsfiddle.net/dzcc5/

Answer 2

从您引用的文档中，qTip插件正在寻找内容以显示为工具提示的默认区域是"title"属性。

尝试将div更改为:

<div title="hello" class="something" style="border:1px solid red; height:150px; width:300px;"></div>

和你的qTip初始化器为:

$('.something').qtip();

编辑:虽然这是默认设置，但您可能不希望在div中添加标题标签。

看起来您可以通过以下操作来设置消息内容:

$('.something').qtip({
    content:{
        text: 'hello'
    }
});

请仔细查看有关该插件的样式和其他可用选项的文档。