Create tooltips using Attributes

Asked

Viewed 266 times

1

I created a custom attribute called Tooltip. I would like to add tooltips to any property that has this attribute.

Example:

In my model I have the following property:

[Required, ToolTip("Neste campo você deve inserir um nome.")]
public string Nome { get; set; }

And in the view:

@Html.TextBoxFor(m => m.Nome, new { @class = "form-control" })

Rendering:

<input class="form-control" data-val="true" data-val-required="O campo Nome é obrigatório." id="Nome" name="Nome" type="text" value="">

I’d like it to render with the bootstrap tooltip attributes, like this:

<input data-toggle="tooltip" data-original-title="Neste campo você deve inserir um nome." class="form-control" data-val="true" data-val-required="O campo Nome é obrigatório." id="Nome" name="Nome" type="text" value="">

Any suggestions?

c# asp.net-mvc twitter-bootstrap

  • Have you seen this link? http://stackoverflow.com/questions/3707997/asp-net-mvc-extending-dataannotions

  • 1

    How you created this attribute?

  • @Jhonatan I really wanted to use the default Textboxfor without creating a new helper or Xtension, but I’m not sure if it can be done.

  • @Randrade identical to the chosen answer on the Jhonathan link

  • @Eduardomoreira , I believe that without any customization would not be possible, at least I do not know.

  • @Jhonatan is, apparently there is not. as this is a somewhat advanced topic for me that I’m starting I ended up traveling in mayonnaise. but thanks for the help.

Show 1 more comment

2 answers

2


I would say that the ideal is for you to write your own extension to generate the <input>. The original source can help. See this method:

private static MvcHtmlString InputHelper(HtmlHelper htmlHelper, InputType inputType, ModelMetadata metadata, string name, object value, bool useViewData, bool isChecked, bool setId, bool isExplicitValue, string format, IDictionary<string, object> htmlAttributes)
    { ... }

Then you could use:

@Html.TextBoxWthTooltipFor(model => model.Nome, ...)

  • I was wanting to continue with the standard Textboxfor, should have explained better there in the question. but apparently there’s no way to do it without giving a customized.

  • Yes, there’s no way, but you can take advantage of this method I pointed out and make your.

0

I ended up going another way. I realized that I could put the tooltip in a span tag instead of in the element itself.

Stayed like this:

public static MvcToolTip ToolTipFor<TModel, TValue> (this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TValue>> expression,  string placement = "right")
{
    var exp = (MemberExpression) expression.Body;
    var attributes = exp.Expression.Type.GetProperty(exp.Member.Name).GetCustomAttributes(typeof(ToolTipAttribute), false);

    var message = (((ToolTipAttribute) attributes[0]).Description);

    return new MvcToolTip(htmlHelper.ViewContext, message, placement);
}

public class MvcToolTip : IDisposable
{
    private readonly TextWriter _writer;

    public MvcToolTip(ViewContext viewContext, string message, string placement = "right")
    {
        _writer = viewContext.Writer;

        _writer.Write("<span data-toggle='tooltip' data-original-title='" + message + "' data-placement='" + placement + "'>");

    }

    public void Dispose()
    {
        _writer.Write("</span>");
    }
}

Use:

@using (Html.ToolTipFor(m => m.Pessoa.Nome))
{
    @Html.TextBoxFor(m => m.Pessoa.Nome, new {@class = "form-control"})
}
<script> $("[data-toggle='tooltip']").tooltip(); </script>

Browser other questions tagged c# asp.net-mvc twitter-bootstrap

You are not signed in. Login or sign up in order to post.