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" @ref="verticalMenu"> 
                            <MenuTemplates> 
                                <Template> 
                                    @{ 
                                        var MenuItems = (context as MenuItemModel); 
                                        if (MenuItems.IconCss != null) 
                                        { 
                                            <span class="e-menu-icon @MenuItems.IconCss hover"> 
                                                <div class="tooltip"> 
                                                    @MenuItems.Text 
                                                </div> 
                                            </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> 
 
<style> 
 
    .hover { 
        position: relative;        
    } 
 
    .tooltip { 
        top: 30px; 
        background-color: crimson; 
        color: black; 
        opacity: 0; 
        position: absolute; 
        font-size:12px; 
        left: 12px; 
    } 
 
    .hover:hover .tooltip { 
        /* display tooltip on hover */ 
        opacity: 1; 
    } 
 
<style> 
 
 
Sample link: 
 
Regards, 
Arunkumar D

RE reinhard May 23, 2020 11:17 AM UTC

Hi Arunkumar,

basically your example works. But if the sidebar has a width of e.g. 50px, the tooltip is cut off. I tried using z index and fixed width for the tooltip but it doesn't work. Can you help me here?


AD Arunkumar Devendiran Syncfusion Team May 27, 2020 02:17 AM UTC

Hi Reinhard, 
 
We have checked your reported query about tooltip and we would inform you that you can achieve this by customizing the tooltip styles. We have created the sample for your reported scenario in that we have achieved your requirement. Please refer the below sample link. 
 
Sample link: 
 
Regards, 
Arunkumar D 


RE reinhard May 27, 2020 09:06 AM UTC


Hi Arunkumar,

thank you for the sample, but it doesn't meet my requirements. I need a representation of the tooltip that goes beyond the boundaries of the sidebar, see below:



Thank's in advance

AD Arunkumar Devendiran Syncfusion Team May 29, 2020 01:23 AM UTC

Hi Reinhard 
 
We have checked your provided screenshot and we suspect that you are trying to add the tooltip on right side of the menu icons. We are working based on that and could you please provide more information if we misunderstood your requirement. 
 
Regards, 
Arunkumar D 


RE reinhard June 1, 2020 10:11 AM UTC

Hi Arunkumar,

yes, i want display the tooltip at the right side of the menu icon.

Please change the style for the tooltip in your sample https://www.syncfusion.com/downloads/support/forum/149848/ze/BlazorApp-1026886092
with the following:

  .tooltip {
        top: 20px;
        color: black;
        opacity: 0;
        position: absolute;
        font-size: 14px;
        left: 20px;
        background-color: crimson;
    }

When the sidebar is docked, you can't see the tooltip.

Thank's in advance

MV Madhan Venkateshan Syncfusion Team June 9, 2020 08:41 AM UTC

Hi Reinhard 
 
Good day to you. 
 
You can use below css style to achieve your requirement. Please refer the code snippets and sample link below 
 
Index.razor 
.sidebar-menu, 
    .sidebar-menu .main-menu .e-menu-wrapper, 
    .sidebar-menu .main-menu .e-menu-wrapper .e-menu { 
        overflow: visible; 
    } 
 
 
Regards, 
Madhan V 


RE reinhard June 11, 2020 10:52 AM UTC

Hello Madhan,

thank you for your sample, it works fine.
Unfortunately my requirements have changed in this way:
Basically, the sidebar should be completely hidden (docksize = 0px) and should only be shown using the Hamburger button. If the window is smaller than 600px, then the sidebar should only have a width of 50 px and the menu should only show the icon with the tooltip. If the window is larger than 600 px, the menu should be displayed with an icon and text and without a tooltip. You can see the functionality in the attached example. Unfortunately it does not work, because the menu text is always displayed.



Thanks in advance

Attachment: BlazorApp_34dd94b2.rar

MV Madhan Venkateshan Syncfusion Team June 15, 2020 06:50 AM UTC

Hi Reinhard, 
 
Good day to you. 
 
You can override the menu styles to achieve your requirement. Please refer the below code snippets. 
 
@@media (max-width: 600px) { 
     
    .sidebar-menu .e-menu-wrapper ul.e-menu { 
        min-width: 48px; 
    } 
 
    .sidebar-menu .e-menu-wrapper ul.e-menu .e-menu-item { 
        font-size: 0; 
    } 
    .sidebar-menu .e-menu-wrapper, 
    .sidebar-menu .e-menu-wrapper .e-menu { 
        overflow: visible; 
    } 
} 
 
 
Regards, 
Madhan V 


RE reinhard June 18, 2020 12:55 PM UTC

Hi Madhan,

thank you for your patience.
Now ir works as requested.

MV Madhan Venkateshan Syncfusion Team June 19, 2020 09:10 AM UTC

Hi Reinhard, 
 
Most Welcome. 
 
Regards, 
 Madhan V

Loader.
Up arrow icon