2

I am using MVC 4 (C# with razor) and I have added a jquery datepicker to my page which works fine.

I now want to add a tooltip which I have done in the code below.

        <div class="editor-label">
        @Html.LabelFor(model => model.Rating)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Rating, new { title = "Rating" })
        @Html.ValidationMessageFor(model => model.Rating)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.ReleaseDate)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.ReleaseDate, new { id = "ReleaseDate" })
        @Html.ValidationMessageFor(model => model.ReleaseDate)
    </div>

With the script as

<script type="text/javascript">

$(function () {
    $('#ReleaseDate').datepicker({ dateFormat: "dd-mm-yy" });
    $( document ).tooltip();
});

The date picker works fine but nothing happens with the tooltip, any ideas?

Here is the full page code for the view

  @model testpage.Models.Game

@{
    ViewBag.Title = "Create";
}
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
 <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

<fieldset>
    <legend>Game</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Title)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Title)
        @Html.ValidationMessageFor(model => model.Title)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Rating)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Rating, new { @title = "Rating" })
        @Html.ValidationMessageFor(model => model.Rating)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.ReleaseDate, "Release Date")
    </div>


       <div class="editor-field">
            @Html.EditorFor(model => model.ReleaseDate, new { id = "ReleaseDate" })
            @Html.ValidationMessageFor(model => model.ReleaseDate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Price)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Price)
            @Html.ValidationMessageFor(model => model.Price)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script type="text/javascript">

    $(function () {
        $('#ReleaseDate').datepicker({ dateFormat: "dd-mm-yy" });
        $( document ).tooltip();
    });


</script>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}
4
  • what are you seeing when you move the cursor to your control ? you see normal tooltip without jquery style or just nothing? Commented Mar 16, 2014 at 17:51
  • I am seeing nothing at all Commented Mar 16, 2014 at 17:54
  • What are you trying to accomplish that adding a title as part of the HTML attributes won't solve? Commented Mar 16, 2014 at 18:14
  • When a user hovers over a text box I want a tooltip to show Commented Mar 16, 2014 at 18:15

1 Answer 1

2

After a lucky find on google the tooltip doesn't work with editorfor so I changed it to TextBoxfor and it worked great

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.