Question

在MVC5应用程序中，我试图将Bootstrap工具提示添加到输入元素。我是通过定义一个自定义的帮助程序类来实现的：

public static class CustomHtmlHelpers
{
    public static string DescriptionFor<TModel, TValue>(this HtmlHelper<TModel> self, Expression<Func<TModel, TValue>> expression)
    {
        var metadata = ModelMetadata.FromLambdaExpression(expression, self.ViewData);
        var description = metadata.Description;

        return string.IsNullOrWhiteSpace(description) ? "" : description;
    }
}

并向我的模型添加一个Description属性：

[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:#.#}")]
[Display(Name = "Total Annual Spend", Description = "Total annual cost of this plan.")]
public decimal AnnualSpend { get; set; }

我首先通过使用@ Html.DescriptionFor（）创建一个div来确保可以使用我的助手类来正确提取描述值。它显示正确。

现在，我尝试使用以下方式添加工具提示：

    <div class="col-md-2">
        @Html.LabelFor(model => model.AnnualSpend, htmlAttributes: new { @class = "control-label" })

        @Html.EditorFor(model => model.AnnualSpend, new { htmlAttributes = new { @class = "form-control", rel="txtTooltip", data_toggle = "tooltip", data_placement = "bottom", title = Html.DescriptionFor(model => model.AnnualSpend) } })
        @Html.ValidationMessageFor(model => model.AnnualSpend, "", new { @class = "text-danger" })
    </div>

和脚本：

        $(document).ready(function () {
            $('input[rel="txtTooltip"]').tooltip();
        });

脚本触发I can see it in the console，但是没有显示工具提示。这可能没有什么区别，但是表单位于“部分视图”中。

这是呈现的HTML：

<div class="col-md-2">
                <label class="control-label" for="model_db94d00a-edbb-47d7-a153-d90b47d35e13__AnnualSpend">Total Annual Spend</label>

                <input class="form-control text-box single-line" data-placement="bottom" data-toggle="tooltip" data-val="true" data-val-number="The field Total Annual Spend must be a number." data-val-required="The Total Annual Spend field is required." id="model_db94d00a-edbb-47d7-a153-d90b47d35e13__AnnualSpend" name="model[db94d00a-edbb-47d7-a153-d90b47d35e13].AnnualSpend" rel="txtTooltip" title="" type="text" value="" data-original-title="Total annual cost of this plan.">
                <span class="field-validation-valid text-danger" data-valmsg-for="model[db94d00a-edbb-47d7-a153-d90b47d35e13].AnnualSpend" data-valmsg-replace="true"></span>
            </div>

悬停时，tooltip is being appended。我尝试删除字段标签，但是工具提示仍然没有显示。

为什么不显示？我在这里查看了许多其他帖子，但没有找到答案。

Bootstrap工具提示未显示在MVC应用程序中

0 个答案: