Tool Tip for list of action links with description

4 posts, 0 answers
  1. Satyakrishna
    Satyakrishna avatar
    2 posts
    Member since:
    Apr 2016

    Posted 08 Sep Link to this post

    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.

  2. Stefan
    Admin
    Stefan avatar
    1137 posts

    Posted 13 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Satyakrishna
    Satyakrishna avatar
    2 posts
    Member since:
    Apr 2016

    Posted 13 Sep Link to this post

    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)
    )

  4. Stefan
    Admin
    Stefan avatar
    1137 posts

    Posted 15 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top