1

基本的に、asp.net MVC4 プロジェクトで qTip2 (ナゲット パッケージ マネージャーを介してインストール) の使用を開始しました。これが私の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

0

私もやったので、あなたが何をしたか知っています。対応する qtip css を含めるのを忘れました。

教訓: 常にブラウザのネットワーク トラフィック タブを確認してください。

于 2014-04-30T14:18:11.397 に答える