对于数据输入字段，我想在用户将鼠标悬停在字段上时显示提示。字段名称为INACT，表示记录是否已停用。需要这样的东西 - 输入I来取消激活记录。
我在ModelMetadata中有这个
[Display(Name = "INACT")]
[DisplayFormat(ConvertEmptyStringToNull = true)]
[StringLength(1)]
public string A_INACT;
并在Inact View中显示 - 此视图是唯一可以编辑此字段的位置。 ：
<div class="editor-label">
@Html.LabelFor(model => model.A_INACT)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.A_INACT , new { htmlAttributes = new { tabindex = 1 } })
@Html.ValidationMessageFor(model =>Model.A_INACT)
</div>
INACT视图
@model MTSapp.Models.mts_rename
@{
ViewBag.Title = "Inact";
}
<style>
.container {
width: 50%;
float: left;
}
</style>
<h2>RE NAME </h2>
<h2>Inact Re Number</h2>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>mts_rename</legend>
<br />
<div class="editor-label">
@Html.LabelFor(model => model.A_ID)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.A_ID, new { @class = "form-control", @readonly = "readonly", @style = "background:#f2f3f3", tabindex = 4 })
</div>
<div class="editor-label">
@Html.LabelFor(model => model.A_RENO)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.A_RENO, new { @class = "form-control", @readonly = "readonly", @style = "background:#f2f3f3", tabindex = 5 })
</div>
<div class="editor-label">
@Html.LabelFor(model => model.A_INACT)
</div>
<div class="editor-field">
<span class="SpaceAvailableSearch">@Html.EditorFor(model => model.A_INACT, new { htmlAttributes = new { tabindex = 1, title = "Enter I to Inactivate Record" } }) </span>
@Html.ValidationMessageFor(model => model.A_INACT)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.A_NAME)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.A_NAME, new { @class = "form-control", @readonly = "readonly", @style = "background:#f2f3f3", tabindex = 6, @title = "This is the RE NAME." })
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
这是查看来源：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Inact - MTS Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<link href="/Content/Myspec" rel="stylesheet" type="text/css" />
<link href="/Content/PagedList.css" rel="stylesheet"/>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><a href="/">MATERIAL TEST SYSTEM</a></p>
</div>
<div class="float-right">
<section id="login">
Hello how are you today, <span class="username">AHTD\mase347</span>!
</section>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/Login">Login</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Home/Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<style>
.container {
width: 50%;
float: left;
}
</style>
<h2>RE NAME </h2>
<h2>Inact Re Number</h2>
<form action="/MTS_RENAME/Inact/1" method="post"> <fieldset>
<legend>mts_rename</legend>
<br />
<div class="editor-label">
<label for="A_ID">ID</label>
</div>
<div class="editor-field">
<input class="form-control" data-val="true" data-val-number="The field ID must be a number." data-val-required="The ID field is required." id="A_ID" name="A_ID" readonly="readonly" style="background:#f2f3f3" tabindex="4" type="text" value="1" />
</div>
<div class="editor-label">
<label for="A_RENO">RE NUMBER</label>
</div>
<div class="editor-field">
<input class="form-control" data-val="true" data-val-length="The field RE NUMBER must be a string with a maximum length of 3." data-val-length-max="3" id="A_RENO" name="A_RENO" readonly="readonly" style="background:#f2f3f3" tabindex="5" type="text" value="1" />
</div>
<div class="editor-label">
<label for="A_INACT">INACT</label>
</div>
<div class="editor-field">
<span class="SpaceAvailableSearch"> <input class="text-box single-line" data-val="true" data-val-length="The field INACT must be a string with a maximum length of 1." data-val-length-max="1" id="A_INACT" name="A_INACT" type="text" value="" /> </span>
<span class="field-validation-valid" data-valmsg-for="A_INACT" data-valmsg-replace="true"></span>
</div>
<div class="editor-label">
<label for="A_NAME">RE NAME</label>
</div>
<div class="editor-field">
<input class="form-control" data-val="true" data-val-length="The field RE NAME must be a string with a maximum length of 39." data-val-length-max="39" data-val-required="The RE NAME field is required." id="A_NAME" name="A_NAME" readonly="readonly" style="background:#f2f3f3" tabindex="6" title="This is the RE NAME." type="text" value="ZZ_TESTXDO THIS ZZXXXX" />
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
</form>
<div>
<a href="/MTS_RENAME">Back to List</a>
</div>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2017 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/jquery-migrate-1.2.1.js"></script>
<script src="/bundles/bootstrap"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
</body>
</html>
答案 0 :(得分：3)
HTML具有title属性，可用于此类工具提示。 （对于比基本工具提示更复杂的东西，你会看到一些自定义样式和可能的JavaScript功能来模仿工具提示，具体取决于采用的方法。谷歌为此提供了各种现成的解决方案。）
因此，您可以在此处设置自定义HTML属性：
htmlAttributes = new { tabindex = 1 }
您只需为title添加一个：
htmlAttributes = new { tabindex = 1, title = "Enter an I to Inactivate a record" }
答案 1 :(得分：1)
@Html.EditorFor(model => model.A_INACT , new { @title="Enter an I to Inactivate a record." })
或者，如果你想要更有趣的东西，我会使用jquery的工具提示 https://jqueryui.com/tooltip/