Tooltips on a Menu?

2 posts, 0 answers
  1. Bob
    Bob avatar
    24 posts
    Member since:
    Dec 2014

    Posted 29 Jun 2015 Link to this post

    I have a menu that I want to add tooltips to. So far, I have added a tooltip, but it is for the entire menu and I would like different tooltips for each menu item.

    Is this possible and if so, how would I do it?

    Here is the code I have so far:
    <div style="background-color: #41526e; float: left">
        @(Html.Kendo()
              .Menu()
              .Name("Menu")
              .Items(items =>
              {
                  items.Add().Text("Home").Action("Index", "Home").ImageUrl(Url.Content("~/Images/Home.png"));
                  items.Add().Separator(true);
                  items.Add()
                       .Text("Search")
                       .Action("Search", "Catalog")
                       .ImageUrl(Url.Content("~/Images/Search.png"));
                  items.Add().Separator(true);
                  items.Add()
                       .Text("First Action")
                       .Action("FirstAction", "Catalog")
                       .ImageUrl(Url.Content("~/Images/Promote.png"));
                  items.Add().Separator(true);
                  items.Add()
                       .Text("Second Action")
                       .Action("SecondAction", "Catalog")
                       .ImageUrl(Url.Content("~/Images/Promote.png"));
                  items.Add().Separator(true);
                  items.Add()
                       .Text("Subscription Stuff")
                       .Action("Index", "Subscription");
                  items.Add().Separator(true);
                  items.Add()
                       .Text("Schedule Stuff")
                       .Action("CreateSchedule", "Subscription");
              })
              .Orientation(MenuOrientation.Vertical)
        )
     
        @(Html.Kendo()
            .Tooltip()
            .For("#Menu")
            //.Filter("button")
            .AutoHide(true)
            .Content("Greetings, Puny Earthling! This is a tooltip for your edification.")
            .Position(TooltipPosition.Top)
            .Width(200)
        )
     
    </div>

     

    TIA,

    Bob

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 01 Jul 2015 Link to this post

    Hi Bob,

    I replied to the same question in your other thread, however here is my answer too:

    You should specify the elements for which the Tooltip will be displayed in the filter configuration option. As for the different content, you should use the ContentHandler method: 
    @(Html.Kendo()
       .Tooltip()
       .For("#Menu")
       .Filter(".k-item")
       .AutoHide(true)
       .ContentHandler("tooltipContent")
       .Position(TooltipPosition.Top)
       .Width(200)
    )
      
    <script>
    function tooltipContent() {
       // custom logic
    }
    </script>



    Regards,
    Iliana Nikolova
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top