Question

我正在尝试使用Poshy Tip jQuery Plugin。我做了一个非常简单的HTML页面：

<!DOCTYPE html>
<html>
    <title>PoshyTip</title>
    <body>
        <center>
            <a href="#" id="tip">Google</a>
        </center>
    </body>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery.poshytip.min.js"></script>
    <script>
        $('#tip').poshytip();
    </script>
</html>

我将.js文件放在与HTML页面相同的文件夹中。但是，我没有看到工具提示。 我在这里做错了什么？

控制台中的内容：

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

那就是它。

Answer 1

您在HTML锚点中缺少title：

<a href="#" title="This is a title" id="tip">Google</a>

另外，你错过了poshytip的CSS文件引用，这里我使用skyblue主题：

<link rel="stylesheet" href="http://vadikom.com/demos/poshytip/src/tip-skyblue/tip-skyblue.css" />

您还需要通过指定className来更改jQuery代码以加载自定义CSS主题：

$('#tip').poshytip({
    className: 'tip-skyblue',
    bgImageFrameSize: 9,
    offsetX: 0,
    offsetY: 20
});

<强> Fiddle Demo

Answer 2

您没有指定标题。

<a href="#" id="tip">Google</a>

应该是

<a href="#" title="Google - a search Engine" id="tip">Google</a>

医生说：

默认浏览器工具提示，显示标题的值属性被替换为“poshier”版本：

Answer 3

将链接更改为

<a href="#" id="tip" title="Google">Google</a>

DEMO

我如何包含jQuery插件？

3 个答案: