qTip2 проблема с неправильной позицией

По сути, я только начал использовать qTip2 (установленный через диспетчер пакетов nugget) в моем проекте asp.net MVC4. Вот мой 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"));
            }

Как видите, я включил оба

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

и

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

Мой _Layout.cshtml выглядит следующим образом:

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

Моя папка скриптов выглядит следующим образом:

введите здесь описание изображения

И, наконец, вот фактическая реализация: Вызывается в ~/bundles/custom:

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

И фактическая кнопка отправки, которая должна содержать всплывающую подсказку:

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

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

Как видно на изображении ниже:

введите здесь описание изображения

Что я делаю не так?


jquery asp.net-mvc asp.net-mvc-4 qtip2 qtip
person Zebedee    schedule 25.08.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

если вы хотите, чтобы qtip находился посередине, у вас должно быть следующее в инициализации Javascript 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
                  }
     });
});

примечание: все позиции можно найти здесь: http://qtip2.com/options#position

person hjavaher    schedule 25.08.2013

arrow_upward
0
arrow_downward

Я знаю, что ты сделал, потому что я тоже это сделал. Вы забыли включить соответствующий qtip css.

Урок: всегда проверяйте вкладку сетевого трафика браузера.

person Bulba    schedule 30.04.2014