This is a migrated thread and some comments may be shown as answers.

Tooltips on a Menu?

4 Answers 255 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 2
Bob asked on 29 Jun 2015, 02:07 PM
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

4 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 01 Jul 2015, 08:18 AM
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
0
Bob
Top achievements
Rank 2
answered on 01 Jul 2015, 03:00 PM

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

0
Accepted
Iliana Dyankova
Telerik team
answered on 03 Jul 2015, 10:27 AM
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
0
Bob
Top achievements
Rank 2
answered on 06 Jul 2015, 06:01 PM

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

Tags
Menu
Asked by
Bob
Top achievements
Rank 2
Answers by
Iliana Dyankova
Telerik team
Bob
Top achievements
Rank 2
Share this question
or