CODEWITHSUNDEEP
jqueryasp.net
Craig
Craig

Reputation: 18734

First jQuery attempt not working

I am trying to show a nice tooltip, using the jQuery plugin called qTip.

However, I am getting a strange result. I have added the jQuery library to my Scripts folder, and created a "3rdParty" folder off that, qhich has the qTip file.

I then reference them in my Asp.Net MasterPage:

<head runat="server">
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta http-equiv="refresh" content="1140" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

    <script type="text/javascript" src="/Scripts/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="/Scripts/3rdParty/jquery.qtip-1.0.0-rc3.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#test').qtip({
                content: 'Mice eat cheese, but not stones.'
            });
        });
    </script>

</head>

I then have an image on my screen, and I am just trying to show a tooltip when the mouse goes over it:

    <a href="/default.aspx">
    <asp:Image ID="test" runat="server" ImageUrl="/Images/main_icon.png" BorderStyle="None" />
</a>

However, when I load the screen, and move the mouse over the image, a 'tooltip' appears on the far left of the screen against the boarder, showing the expected text, but it never goes away when I move the mouse away. Also, it's just text. No real tooltop.

enter image description here

Upvotes: 0

Views: 184

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388436

You are using an very old version of qtip with a latest version of jquery, it might have script errors because of some non-compatible changes. please try to use qtip2 instead

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js"></script>
<img id="test" src="dd.png"/>

then

$(document).ready(function() {
    $('#test').qtip({
        content: 'Mice eat cheese, but not stones.'
    });
});

Demo: Fiddle

Upvotes: 1

BoxerBucks
BoxerBucks

Reputation: 3124

I just looked at the docs and they have options for show and hide like so: 

$('ul:last li.active').qtip({
   content: 'This is an active list element',
   show: 'mouseover',
   hide: 'mouseout'
})

So maybe add the show and hide to your qtip function.

Upvotes: 0

Related Questions