Tool Tip for list of action links with description

[Satyakrishna]

Hi , I have model  with iterating items to show the list of items and I want to show tooltip for each item description. Please help me. 

below is the code snippet.

 

 </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <ul class="single">
                        <li>
                            @Html.ActionLink(item.Name, "LoadValue", "Category", new { item.BusinessId, ViewBag.Environment }, null)
                        </li>
                    </ul>
                </td>
            </tr>
        }

 

 

I am new to Kendo. and am confused how to bind the tooltip  for each item here.

[Stefan]

Hello Satyakrishna,

I can suggest checking the following article demonstrating how to attach a ToolTip over multiple elements in a list. The example is for the menu, but the same approach can be used for a list of items. The specific is that the li element has to have a class and that class to be used as a filter for the ToolTip:

http://www.telerik.com/forums/tooltips-on-a-menu

@foreach (var item in Model)
{
    <tr>
        <td>
            <ul class="single">
                <li class="item-with-tooltip">
                    @Html.ActionLink(item.Name, "LoadValue", "Category", new { item.BusinessId, ViewBag.Environment }, null)
                </li>
            </ul>
        </td>
    </tr>
}

@(Html.Kendo()
   .Tooltip()
   .For("#Menu")
   .Filter(".item-with-tooltip")
   .AutoHide(true)
   .ContentHandler("tooltipContent")
   .Position(TooltipPosition.Top)
   .Width(200)
)

I hope this is helpful.

Regards,
Stefan
Progress Telerik

[Satyakrishna]

Could you please elaborate the solution here more please as am new to Kendo.

 

i want to display the tool tip description from each item value description from model ( looped here) - Item.name for link name and Item.description for tooltip. Here action link has a dynamic id and how can I correlate the each link ID to show the tool tip please.

 

@foreach (var item in Model)
{
    <tr>
        <td>
            <ul class="single">
                <li class="item-with-tooltip">
                    @Html.ActionLink(item.Name, "LoadValue", "Category", new { item.BusinessId, ViewBag.Environment }, null)
                </li>
            </ul>
        </td>
    </tr>
}

 

 

@(Html.Kendo()
   .Tooltip()
   .For("#Menu")
   .Filter(".item-with-tooltip")
   .AutoHide(true)
   .ContentHandler("tooltipContent")
   .Position(TooltipPosition.Top)
   .Width(200)
)

[Stefan]

Hello Satyakrishna,

I can suggest using the ContentTemplateId property of the ToolTip. This will allows setting a template which has access to the data from the model item.

@(Html.Kendo()
   .Tooltip()
   .For("#Menu")
   .Filter(".item-with-tooltip")
   .AutoHide(false)
   .ContentTemplateId("template")
   .Position(TooltipPosition.Bottom)
   .Width(200)
)

<script id="template" type="text/x-kendo-template">
    //The value may vary depending on the data structure
    <p>#=target.data('item.description')#</p>
</script>

http://demos.telerik.com/aspnet-mvc/tooltip/template

If additional assistance is needed, please send a runnable example, and I will gladly modify it to demonstrate the implementation.

Regards,
Stefan
Progress Telerik