文章/答案/技术大牛

发布

问qTip2错误位置问题
EN

Stack Overflow用户

提问于 2013-08-25 22:53:58

回答 2查看 2.7K关注 0票数 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'
    });
});

和实际的submit按钮，它应该包含工具提示：

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

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

如下图所示：

我做错了什么？

qtip

qtip2

jquery

asp.net-mvc

asp.net-mvc-4

回答 2

Stack Overflow用户

发布于 2013-08-26 01:37:50

如果您希望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

票数 1

Stack Overflow用户

发布于 2014-04-30 22:18:11

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18430268

复制

相似问题

问qTip2错误位置问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问qTip2错误位置问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问qTip2错误位置问题
EN