1

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

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

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>

我很感激任何关于可能是什么问题的建议。

提前谢谢了！

4

2 回答 2

0

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

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

只需完成这两个步骤，您的代码就可以运行。

演示：http: //jsfiddle.net/dzcc5/

于 2013-04-05T16:17:53.350 回答
-1

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

尝试将您的 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'
    }
});

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

于 2013-04-05T15:52:17.637 回答