Работает в jsfiddle, но не в реальном

У меня есть этот jsfiddle о плагине qTip 2:

http://jsfiddle.net/QqER5/

Этот список открывает речевые пузыри на "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

но там это не работает, кто-нибудь может сказать мне, почему? я делаю это точно так же, как документация плагина хочет, чтобы я это сделал. Привет!

Источник

3 ответа

Решение

Я проверил предоставленный вами URL:

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

Я обнаружил, что я не включил файл Jquery jQuery 1.8.3 на вашей странице php.

включите его, а затем проверьте результат.

<!-- 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>
Источник

Как сказал Бхавеш Качадия, вам нужно включить 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>
Источник

На самом деле подсказка работает на вашей странице, но она не видна из-за полной ширины ul

Ваш ulwidth по умолчанию 100% сейчас.

уменьшите его, чтобы вы могли сделать подсказку видимой.

применить что-то вроде этого:

#ul1 {
width:250px;
margin:0;
padding:0;
}
Источник
Другие вопросы по тегам