Tooltips on a Menu?

5 posts, 1 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
    2594 posts

    Posted 01 Jul 2015 Link to this post

    Hi Bob,

    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
  4. Bob
    Bob avatar
    24 posts
    Member since:
    Dec 2014

    Posted 01 Jul 2015 in reply to Iliana Nikolova Link to this post

    I am not quite sure what the "custom logic" would be.

    It seems like an if - then - else or a switch statement, but i am not sure how to determine what each element of the menu is.

    I would like it that when I hover over "Home" the tooltip might say something like - "Click her to return to the Home page"

    And hovering over "Search" would say something like - "Click here to search through our catalog"

    I just don't know how to tell the tooltipContent function which of the items I am hovering over.

    Thanks,

    Bob

  5. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2594 posts

    Posted 03 Jul 2015 Link to this post

    Hi Bob,

    In the content handler you could get the element for which the tooltip is shown via the event target
    function tooltipContent(e) {
        var text = e.target.text();
        if (text === "Home") {
            return "Click her to return to the Home page"
        }
        else if (text === "Search") {
            return "Click here to search through our catalog"
        }
        else {
            return "Some other tooltip content"
        }
    }


    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
  6. Bob
    Bob avatar
    24 posts
    Member since:
    Dec 2014

    Posted 06 Jul 2015 in reply to Iliana Nikolova Link to this post

    Wonderful, Thank you so much.

    I had something like that but it wasn't working because I did not have the "var text = e.target.text();" part.

    Thanks again,

    Bob

Back to Top
UI for ASP.NET MVC is VS 2017 Ready