Question

我有关于qTip 2-plugin的这个jsfiddle：

此列表打开“mouseover”上的语音气泡：

<ul id="ul1">
    <li data-browser="firefox">Firefox</li>
    <li data-browser="ie">IE</li>
    <li data-browser="opera">Opera</li>
</ul>

我也在测试服务器上实现：

http://test81063.test-account.com/info/test.php

但它没有用，任何人都可以告诉我为什么？我这样做就像插件的文档希望我这样做。问候！

Answer 1

我测试了您提供的网址：

http://test81063.test-account.com/info/test.php

我发现我没有在你的php页面中包含Jquery文件jQuery 1.8.3。

包括它，然后检查结果。

<!-- Include either the minifed or production version, NOT both!! -->
<script type="text/javascript" src="qtip/jquery-2.0.3.min.js"></script>

    <!-- Optional: imagesLoaded script to better support images inside your tooltips -->
    <script type="text/javascript" src="qtip/imagesloaded.pkg.min.js"></script>
    <script>
    $(document).ready(function() {
        $("#ul1").on('mouseenter', 'li[data-browser]', function (event) {
            var browser = $(this).data('browser');

            $(this).qtip({
                overwrite: false,
                content: '<img src="http://media1.juggledesign.com/qtip2/images/browsers/64-' + browser + '.png" alt="' + browser + '"/>',
                position: {
                    my: 'right center',
                    at: 'left center',
                    target: $(this),
                    viewport: $('#ul1')
                },
                show: {
                    event: event.type,
                    ready: true
                },
                hide: {
                    fixed: true
                }
            }, event); 
        });
    });
    </script>

还可以在页眉中添加样式表，并且工作正常：

<style type="text/css">
        li
        {
            width: 100px;
            background-color: #cef;
            margin: 10px;
            outline: 1px solid #000;
        }
    </style>

Answer 2

正如Bhavesh Kachhadiya说你需要包含jquery，你需要在你的代码之前包含它，否则浏览器将不知道$（document）是什么。

将它包含在头部中：

<head>
    <meta charset="UTF-8" />
    <script type="text/javascript" src="qtip/jquery-2.0.3.min.js"></script>
    <link type="text/css" rel="stylesheet" href="qtip/jquery.qtip.min.css" />
</head>

Answer 3

实际上工具提示在您的页面中有效但由于全宽 ul

而无法看到

您的ul width现在默认为100%。

减少它，以便您可以使工具提示可见。

应用以下内容：

#ul1 {
width:250px;
margin:0;
padding:0;
}

在jsfiddle工作，但不是真实的

3 个答案: