Question

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

我的代码下面有一个空白的div .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添加title属性，以及您没有包含qtip 2的css文件。

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

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

演示：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'
    }
});

请详细了解documentation有关该插件可用的样式和其他选项。

qTip文本提示简单的插件无法正常工作

2 个答案: