CODEWITHSUNDEEP
javascriptasp.net-mvcmodel-view-controllertooltip
bruceiow
bruceiow

Reputation: 327

custom tooltip in MVC on a table - show data per line

I am struggling to get an intuitive tooltip to display per line in my MVC application.

   @foreach (var item in Model)
{

    int countSDOL = (item.sdolDetails.Count(i => i.userid == item.id));
    int workFlow = (item.workflows.Count(i => i.actionOutstanding == true));     
    @Html.HiddenFor(modelItem => item.id)
    <tr style="@(workFlow > 0 ? "Background-color:#87BEF5" : "")">
    <td>
         @if (workFlow > 0)
            {     

                <button id="quickButton" class="classname" value="@item.id" data-task-id="@item.id">Actions</button>
            }
    </td>
    <td>
             <div class="tooltip">
               @foreach (var role in item.userRoles)
               {
                    <div title="">
                    @Html.DisplayFor(roles => role.role.roleDescription) 
                    </div>
               }                        
          </div>  
     </td>
      <td>
            @Html.DisplayFor(modelItem => item.title)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.forename)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.surname)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.employeeNumber)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.sdolInitiation)
        </td>
        <td align="center">
            @if (item.trainingTrackerPassed.Equals(true))
            {
                <img src="../../Content/tick.png" />
            }
            else
            {
                <img src="../../Content/cross.PNG" />
            }
        </td>
        <td align="center">
        @if (item.userValid.Equals(true))
        {
                <img src="../../Content/tick.png" />
        }
        else
        {
                <img src="../../Content/cross.PNG" />
        }

        </td>
        <td align="left">
            @Html.ActionLink("Details", "Details", new { id = item.id }) |
            @Html.ActionLink("Roles", "Index", "Roles", new { id = item.id }, null) |
           @if (countSDOL == 0)
           {
            @Html.ActionLink("SDOL", "Create", new { id = item.id }, null)                                       
           }
           else
           {
            @Html.ActionLink("SDOL", "Sdol", new { id = item.id }, null)   
           }        
        </td>
        <td>
         <a id="download_now">show</a>   
        </td>
    </tr>

}

Above is my view. Notice the nested @foreach in there. This shows for each row in the table a list of roles assigned for that row.

What I really need to do is show this div containing the roledescriptions as a tool tip per line. I tried downloading and using jquery tools and managed to get it to display a tool tip, but it would only work on the first row of the table. each subsequent row wouldn't display a tooltip. looking at the examples on their site, there is only examples of tooltip one value for an entire table.. has anyone done what I am trying to achieve??

Many thanks

Upvotes: 0

Views: 5387

Answers (3)

Sachin Cholkar
Sachin Cholkar

Reputation: 89

    @foreach (var item in Model)
    {
        <tr>
            <td>
                <input type="text" value="@item.ICID" hidden>
                <span title='@item.ICName'>@Html.DisplayFor(modelItem => item.ICName)</span>
            </td>
        </tr>
     }

Apply Span tag surrounding the Display element and pass the Tooltip name to title attribute in Span tag.

Upvotes: 0

Libin M
Libin M

Reputation: 511

Html.DisplayFor Doesn't show tooltips using @title parameter. Instead use this (Additional info is the tool tip):

 <td>
                    <div id=j>
                        @Html.DisplayFor(modelItem => item.AdditionalInfoShort)
                        </div>

                        <noscript  id=i>@Html.DisplayFor(modelItem => item.AdditionalInfo)</noscript>

                </td>

And the use JavaScript method below

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
    $(document).tooltip({
        items: "#j",
        content: function() {
            return $(this).closest('td').children("#i").text();
        }
    });
</script>

Upvotes: 0

Tsasken
Tsasken

Reputation: 689

The title attribute will show you a tooltip when you hover the said row.. If you want a more customizable tooltip, there are a few jquery/javascript tooltip scripts around.

http://jqueryui.com/tooltip/

Jquery ui tooltip is a very easy to implement tooltip and has a lot of options to customize behavior.

To use:

1: Get the jquery ui and jquery scripts or cdn links and put in on your page 2: Set a title for each element needing a tooltip with the tooltip contents 3: use jquery selector to find the elements you want the tooltip to show on 4: use the tooltip function on the selector

$("#IWantAllTitlesInThisIdAsTooltips").tooltip()

Upvotes: 2

Related Questions