1

基本上我刚刚开始在我的 asp.net MVC4 项目中使用 qTip2（通过 nugget 包管理器安装）。这是我的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>

当我加载页面时，当我将鼠标移到文本框上时，我会看到文本 - 但问题是无论如何它都在左下角。

如下图所示：

在此处输入图像描述

我究竟做错了什么？

4

2 回答 2

1

如果您希望 qtip 位于中间顶部，您应该在 qtip 的 Javascript 初始化中包含以下内容：

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

于 2013-08-25T17:37:49.760 回答
0

我知道你做了什么，因为我也做过。您忘记包含相应的 qtip css。

教训：始终检查浏览器的网络流量选项卡。

于 2014-04-30T14:18:11.397 回答