CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4qtipqtip2
Zebedee
Zebedee

Reputation: 505

qTip2 wrong position issue

Basically I've just started using qTip2 (installed through the nugget package manager) in my asp.net MVC4 project. Here's my BundleConfig:

public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/custom").Include(
                        "~/Scripts/CustomScripts/*.js",
                        "~/Scripts/libs/qtip2/jquery.qtip.js"));

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/site.css",
                "~/Content/libs/qtip2/jquery.qtip.css"));
            }

As you see I've included both 

"~/Scripts/libs/qtip2/jquery.qtip.js"

and 

"~/Content/libs/qtip2/jquery.qtip.css"

My _Layout.cshtml looks the following:

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/custom")
</head>

My scripts folder looks the following:

enter image description here

And finally here's the actual implementation: Called in ~/bundles/custom:

$(document).ready(function () {
    $('.submitbutton').qtip(
    {
        content: 'Some basic xcontent for the tooltip'
    });
});

And the actual submit button that should contain the tooltip:

<div class="buttons">
    <input class="submitbutton" type="submit" value="Register">
</div>

When I load the page I see the text when I move my mouse over the textbox - the issue is however that it's in the bottom left corner no matter what.

As seen in the image below:

enter image description here

What am I doing wrong?

Upvotes: 1

Views: 2806

Answers (2)

Bulba
Bulba

Reputation: 835

I know what you did, because I did it too. You forgot to include the corresponding qtip css.

Lesson: always check the browser's network traffic tab.

Upvotes: 0

hjavaher
hjavaher

Reputation: 2609

if you want the qtip to be on the middle top you should have the following in your Javascript initialization of qtip:

$(document).ready(function () {
    $('.submitbutton').qtip(
    {
        content: 'Some basic xcontent for the tooltip',
        position: {
                my: 'bottom center',  // tooltips tip at bottom center...
                at: 'top center', // in relation to the button's top center...
                target: $('.submitbutton') // my target
                  }
     });
});

note: all the positions can be found here: http://qtip2.com/options#position

Upvotes: 1

Related Questions