We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Blazor
  4. Tooltip for menu items

Tooltip for menu items

Is there a chance to set tooltip (html attribute title) for MenuItem generated in c# code.
I am using EjsMenu control, my menu control is docked inside sidebar as shown in sample.
I am trying to set tooltip for icons inside menu, so when is menu minimized user can on hover over menu item get tooltip for what is menu, without clicking on it , or toggling sidebar

Here is snippets of code I am using to build menu

<EjsMenu CssClass="dock-menu" Items="@MainMenuItems" Orientation="@Verorientation">
                                </EjsMenu>

@code {
    public Orientation Verorientation = Orientation.Vertical;
 public List<MenuItem> MainMenuItems = new List<MenuItem>{

        new MenuItem {
            Text = "Meni", IconCss = "icon-comment-inv-alt2 icon",
        },

        new MenuItem
        {
            Text="Pokupi podateke", IconCss="icon-comment-inv-alt2 icon" ,Url="/fetchdata"
        },

        new MenuItem {
            Text = "Overview", IconCss = "icon-user icon",
                Items = new List<MenuItem> {
                    new MenuItem{ Text = "All Data" },
                    new MenuItem{ Text = "Category2" },
                    new MenuItem{ Text = "Category3" }
                }
            },


}

} 

19 Replies
AD Arunkumar Devendiran Syncfusion Team December 16, 2019 02:43 AM UTC

Hi Admir Hodžic, 
Thank you for contacting Syncfusion support.   
  
We have checked your reported query and you can achieve this by using Menu template. We have created the sample for your requirement, in that we have added the tooltip on menu items. Please refer the below sample link, 
 
Index.razor 
 
<div id="wrapper"> 
    <div class="col-lg-12 col-sm-12 col-md-12"> 
        <div class="header-section dock-menu" id="header"> 
            <ul class="header-list"> 
                <li id="hamburger" class="icon-menu icon list" @onclick="@Toggle"></li> 
                <input type="text" placeholder="Search..." class="search-icon list"> 
                <li class="right-header list"> 
                    <div class="horizontal-menu"> 
                        <EjsMenu CssClass="dock-menu" Items="@AccountMenuItems" Orientation="@Orientation"></EjsMenu> 
                    </div> 
                </li> 
                <li class="right-header list support">Support</li> 
                <li class="right-header list tour">Tour</li> 
            </ul> 
        </div> 
        <EjsSidebar HtmlAttributes="@htmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="sidebar"> 
            <ChildContent> 
                <div class="main-menu"> 
                    <p class="main-menu-header">MAIN</p> 
                    <div> 
    <EjsMenu ModelType="@MenuTemplate" Fields="@MenuFields" Items="@MainMenuItems" Orientation="Orientation.Vertical"> 
      <MenuTemplates> 
         <Template> 
         @{ 
           var MenuItems = (context as MenuTemplateModel); 
           if (MenuItems.Icon != null) 
             { 
            <span class="e-menu-icon @MenuItems.Icon" title="@MenuItems.Value"></span> 
             } 
           if (!string.IsNullOrEmpty(MenuItems.Link)) 
             { 
              <a rel='nofollow' href="@MenuItems.Link">@MenuItems.Value</a> 
             } 
           else 
             { 
               @MenuItems.Value 
             } 
           } 
         </Template> 
        </MenuTemplates> 
      </EjsMenu> 
     </div> 
  </div> 
     <div class="action"> 
       <p class="main-menu-header">ACTION</p> 
          <button class="e-btn action-btn" id="action-button">+ Button</button> 
      </div> 
     </ChildContent> 
  </EjsSidebar> 
        <div class="main-content" id="maintext"> 
            <div class="content"> 
                <div> Responsive Sidebar with Menu</div> 
            </div> 
        </div> 
    </div> 
</div> 
@code { 
    EjsSidebar sidebar; 
    public Orientation Orientation = Orientation.Horizontal; 
    public Orientation Verorientation = Orientation.Vertical; 
    Dictionary<string, object> htmlAttribute = new Dictionary<string, object>() 
{ 
        {"class", "sidebar-menu" } 
    }; 
    public List<MenuItem> AccountMenuItems = new List<MenuItem> { 
        new MenuItem { 
            Text = "Account", 
            Items = new List<MenuItem> { 
                new MenuItem { Text = "Profile" }, 
                new MenuItem { Text = "Sign out" } 
            } 
        } 
    }; 
    MenuTemplateModel MenuTemplate = new MenuTemplateModel(); 
    private List<MenuTemplateModel> 
    MainMenuItems = new List<MenuTemplateModel> 
    { 
 
                new MenuTemplateModel { Icon ="icon-bookmark icon", Value = "Meni"}, 
                new MenuTemplateModel {  Icon ="icon-bookmark icon", Value = "Pokupi podateke"}, 
    new MenuTemplateModel {  Icon ="icon-user icon",Value = "Overview", Options  = new List<MenuTemplateModel>{ 
 
            new MenuTemplateModel { Value= "All Data" }, 
            new MenuTemplateModel { Value= "Category2" }, 
            new MenuTemplateModel { Value= "Category3" } 
   } 
  }, 
 }; 
 
    MenuFieldSettings MenuFields = new MenuFieldSettings() 
    { 
        Text = "Value", 
        Url = "Link", 
        IconCss = "Icon", 
        Children = "Options" 
    }; 
    private class MenuTemplateModel 
    { 
        public List<MenuTemplateModel> Options { get; set; } 
        public string Value { get; set; } 
        public string Link { get; set; } 
        public string Icon { get; set; } 
    } 
    public void Toggle() 
    { 
        this.sidebar.Toggle(); 
    } 
} 
 
 
Sample Link: 
 
Could you please check the above link and get back to us with more information if we misunderstood your requirement or need further assistance.   
  
Regards,  
Arunkumar D  


AH Admir Hodžic December 17, 2019 11:42 AM UTC

Thank you a lot on your effort and support.
Your sample is working, but unfortunately looks like when templating items is selected callback event can't figure anymore which item fired event.
Without templates MenuSelect callback event receiving MenuEventArgs which contain info about Text and and other MenuItemModel property.
Can we construct MenuSelect callback when using templates to receive any reference form TemplatedModel so we can do selected logic in code behind.

My EjsMenu subscribe to MenuSelect event

 <EjsMenu CssClass="dock-menu" ModelType="@MenuTemplate" Fields="@MenuFields" Orientation="@Verorientation" Items="@MainMenuItems">
                                <MenuTemplates>
                                    <Template Context="templateContex">
                                        @{
                                            var MenuItems = (templateContex as MenuTemplateModel);
                                            if (MenuItems.Icon != null)
                                            {
                                                <span class="e-menu-icon @MenuItems.Icon" title="@MenuItems.Value"></span>
                                            }
                                            if (!string.IsNullOrEmpty(MenuItems.Link))
                                            {
                                                <a rel='nofollow' href="@MenuItems.Link">@MenuItems.Value</a>
                                            }
                                            else
                                            {
                                                @MenuItems.Value
                                            }
                                        }
                                    </Template>
                                </MenuTemplates>
                                <MenuEvents  ItemSelected="MenuSelect">
                                    
                                </MenuEvents>

in @code i get fired event
private void MenuSelect(MenuEventArgs args)
    {
        if (args.Item.Text == "Meni")
            this.sidebar.Toggle();
    }
But  args.Item does not preserve Text , Or ID or anything that I could use to route my action in code behind.
Thanks in advance

AD Arunkumar Devendiran Syncfusion Team December 22, 2019 01:41 PM UTC

Hi Admir Hodžic, 
 
Good day to you. 
 
We have checked your reported query and we suggest you to add model type as “@typeof(MenuItemModel)” to get the menu item text in “ItemSelected” event. We have created the sample for your requirement, in that we have shown how to get the selected menu item text. Please refer the below code snippet and sample link,  
 
Index.razor 
 
<div id="wrapper"> 
    <div class="col-lg-12 col-sm-12 col-md-12"> 
        <div class="header-section dock-menu" id="header"> 
            <ul class="header-list"> 
                <li id="hamburger" class="icon-menu icon list" @onclick="@Toggle"></li> 
   <input type="text" placeholder="Search..." class="search-icon list"> 
   <li class="right-header list"> 
   <div class="horizontal-menu"> 
   EjsMenu CssClass="dock-menu" Items="@AccountMenuItems" Orientation="@Orientation"></EjsMenu> 
        </div> 
      </li> 
   <li class="right-header list support">Support</li> 
   <li class="right-header list tour">Tour</li> 
  </ul> 
   </div> 
        <EjsSidebar HtmlAttributes="@htmlAttribute" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="sidebar"> 
     <ChildContent> 
  <div class="main-menu"> 
    <p class="main-menu-header">MAIN</p> 
      <div> 
        <EjsMenu ModelType="@typeof(MenuItemModel)" Items="@MainMenuItems" Orientation="Orientation.Vertical"> 
         <MenuTemplates> 
            <Template> 
      @{ 
         var MenuItems = (context as MenuItemModel); 
         if (MenuItems.IconCss != null) 
           { 
          <span class="e-menu-icon @MenuItems.IconCss" title="@MenuItems.Text"></span> 
           } 
       if (!string.IsNullOrEmpty(MenuItems.Url)) 
           { 
       <a rel='nofollow' href="@MenuItems.Url">@MenuItems.Text</a> 
           } 
       else 
          { 
            @MenuItems.Text 
          } 
      } 
        </Template> 
      </MenuTemplates> 
     <MenuEvents ItemSelected="onItemSelected"></MenuEvents> 
  </EjsMenu> 
     </div> 
     </div> 
     <div class="action"> 
       <p class="main-menu-header">ACTION</p> 
         <button class="e-btn action-btn" id="action-button">+ Button</button> 
     </div> 
    </ChildContent> 
        </EjsSidebar> 
        <div class="main-content" id="maintext"> 
            <div class="content"> 
                <div> Responsive Sidebar with Menu</div> 
            </div> 
        </div> 
    </div> 
</div> 
@code { 
    EjsSidebar sidebar; 
    public Orientation Orientation = Orientation.Horizontal; 
    public Orientation Verorientation = Orientation.Vertical; 
    Dictionary<string, object> htmlAttribute = new Dictionary<string, object>() 
{ 
            {"class", "sidebar-menu" } 
        }; 
    public List<MenuItem> AccountMenuItems = new List<MenuItem> { 
            new MenuItem { 
                Text = "Account", 
                Items = new List<MenuItem> { 
                    new MenuItem { Text = "Profile" }, 
                    new MenuItem { Text = "Sign out" } 
                } 
            } 
        }; 
    MenuItemModel MenuTemplate = new MenuItemModel(); 
    private List<MenuItem> 
    MainMenuItems = new List<MenuItem> 
    { 
                    new MenuItem { IconCss ="icon-bookmark icon", Text = "Meni"}, 
                    new MenuItem {  IconCss ="icon-bookmark icon", Text = "Pokupi podateke"}, 
                    new MenuItem {  IconCss ="icon-user icon",Text = "Overview", Items  = new List<MenuItem>{ 
 
                     new MenuItem { Text= "All Data" }, 
                     new MenuItem { Text= "Category2" }, 
                     new MenuItem { Text= "Category3" } 
 
                    } 
                    }, 
                                }; 
    public void Toggle() 
    { 
        this.sidebar.Toggle(); 
    } 
    public void onItemSelected(MenuEventArgs args) 
    { 
        string itemText = args.Item.Text; 
    } 
} 
 
 
 
Sample Link: 
 
Could you please check the above link and get back to us with more information if we misunderstood your requirement or need further assistance.   
  
Regards, 
Arunkumar D  


RE reinhard May 13, 2020 05:03 PM UTC

Hello Syncfusion Team,

your attached sample works, but when i extent the sample with a menu referenz  and extend the function "onItemSelected":

public void onItemSelected(MenuEventArgs args)
    {
        string itemText = args.Item.Text;
        Toggle();
        menu.Refresh();
    }

the menuitems are not displayed:


I have a second question:
How can i design the tooltip?

Thanks in advance


AD Arunkumar Devendiran Syncfusion Team May 15, 2020 01:07 AM UTC

Hi Reinhard, 
 
Query1: menuitems are not displayed 
 
We have checked your reported issue with a provided code snippet. In that, you are refresh the menu component. So that you are facing this kind of issue. We have created the sample for your reported scenario in that menu items not hide while clicking the items. Please refer the below sample link. 
 
Sample link: 
 
Query2: How can i design the tooltip? 
 
We need to validate on this query. And, we will update you the further details on May 15, 2020. 
 
Regards, 
Arunkumar D 


RE reinhard May 15, 2020 12:55 PM UTC

Hi Arunkumar,

thank you for your answer.

I know, that the menu is displayed, if i don't use the refresh funktion of the menu.
In my environment/project i need this possibility/functionality. 

Thanks


AD Arunkumar Devendiran Syncfusion Team May 18, 2020 12:43 PM UTC

Hi Reinhard, 
 
Could you please share the more information about in which case you need to refresh the menu bar? So, that we can analyze based on that and provide you a better solution. The information provided would be great help for us to proceed further. 
 
Regards, 
Arunkumar D 


RE reinhard May 19, 2020 11:09 AM UTC

Hi Arunkumar,

i use the Oqtane framework (www.oqtane.org), it has a custom siterouter. On the startpage (Default.razor) the menu is build. My mistake was, that i have build the menuItems in the function "OnParameterSetAsync". Now, i build the menuItems in the function "OnInitializedAsync" and it works as expected.

Thank you again for your help.

Please think about question query 2: How can i design the tooltip? 

AD Arunkumar Devendiran Syncfusion Team May 21, 2020 01:40 AM UTC

Hi reinhard, 
 
Query 1:  
 
We are working your reported issue with high priority and we will update you with further details on May 22, 2020.  
 
Query 2: How can i design the tooltip? 
 
We would inform you that we have created the sample for your reported scenario. In that, we have customized the tooltip while hovering the menu items. In this way, you can customize the tooltip based on your requirement. Please refer the below code snippet and sample link. 
  
Index.razor 
  <EjsMenu ModelType="@typeof(MenuItemModel)" Items="@MainMenuItems" Orientation="Orientation.Vertical" @