基本的に、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>
ページをロードすると、マウスをテキストボックスの上に移動するとテキストが表示されますが、問題は、何があっても左下隅にあることです。
下の画像に示すように:
私は何を間違っていますか?