working in jsfiddle, but not in real

Question

working in jsfiddle, but not in real

177 Views Asked by user2999787 At 06 December 2013 at 14:33

I have this jsfiddle about the qTip 2-plugin:

This list is opening speechbubbles on "mouseover":

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

I also implemented on a test-server:

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

but there it´s not working, anybody could tell me why? i do it exactly like the documentation of the plugin want´s me to do it. greetings!

Original Q&A

There are 3 best solutions below

Fels On 06 December 2013 at 14:52

As Bhavesh Kachhadiya said you need to include jquery, and you need to include it before your code, or the browser won't know what $(document) is.

Include it in the head like this:

<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>

Prasanth K C On 06 December 2013 at 15:03

Actually the tooltip is working in your page but it is not visible because of full-width ul

Your ul width is in default 100% now.

reduce it, so that you can make tooltip visible.

apply something like this:

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

**Bhavesh Kachhadiya** · Accepted Answer · 2013-12-06T14:38:37.227000

I have tested the URL you have provided:

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

I found that I doesn't included the Jquery file jQuery 1.8.3 in your php page.

include it and than check the result.

<!-- 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>

Also add style sheet at your page header and its work fine :

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

working in jsfiddle, but not in real

There are 3 best solutions below

Related Questions in JQUERY

Related Questions in PLUGINS

Related Questions in QTIP

Trending Questions

Popular # Hahtags

Popular Questions