Adding tooltip to menu bar
I am using menu bar to displayed a docked sidebar and I want to add tooltip to it. I tried adding title="@item.Text" but it still does not work. I have attached a sample.
Attachment: BlazorAppTest_f1dc3861.zip
Hi Nick,
We are currently validating your reported query, so we will update you with further details by April 4th, 2022.
Regards,
Janakiraman S.
Hi,
When can I expect a reply to this?
Hi Nick,
Sorry for the delay.
We have checked your sample and in that you have used Items property as well as MenuItems tag directive to render Menu component which causes this issue. So, we have removed the Items property and used TValue to resolve this issue. Please find the code snippet below,
|
<SfMenuTValue="MenuItem"CssClass="dock-menu"Orientation="@VerOrientation"> <MenuItems> @foreach (var item in MainMenuItems) { <MenuItemText="@item.Text"IconCss="@item.IconCss"Url="@item.Url" title="@item.Text"></MenuItem> } </MenuItems> </SfMenu> |
Please check and get back to us if you need further assistance on this.
Regards,
Saranya D
Doing this prevents the sub-menu item from being loaded after docking.
Hi Nick,
We have checked your sample and in that you need to add tag directive for sub items. Please find the code snippet below,
|
<SfMenu TValue="MenuItem" CssClass="dock-menu" Orientation="@VerOrientation"> <MenuItems> @foreach (var item in MainMenuItems) { <MenuItem Text="@item.Text" IconCss="@item.IconCss" Url="@item.Url" title="@item.Text"> @if (item.Items != null) { <MenuItems> @foreach (var item1 in item.Items) { <MenuItem Text="@item1.Text" IconCss="@item1.IconCss" Url="@item1.Url" title="@item1.Text"></MenuItem> } </MenuItems> } </MenuItem> } </MenuItems> </SfMenu> |
Please check and get back to us if you need further assistance on this.
Regards,
Thaneegairaj S
How can I add the tooltip from code behind ?
I'm adding the menuitems programmatically but I don't find a way to add the tooltip
Hi Walter Martin,
We have checked your reported query and prepared a sample based on your requirements. In Button Click, we have changed the menu item dynamically. Please refer to the code snippet and sample below.
|
<SfMenu TValue="MenuItem" CssClass="dock-menu"> <MenuItems> @foreach (var item in MainMenuItems) { <MenuItem Text="@item.Text" title="@item.Text"> @if (item.Items != null) { <MenuItems> @foreach (var item1 in item.Items) { <MenuItem Text="@item1.Text" title="@item1.Text"></MenuItem> } </MenuItems> } </MenuItem> } </MenuItems> </SfMenu> <SfButton @onclick="onclick">Change Item Dynamically</SfButton>
@code { public class MenuItemModel { public List<MenuItemModel> Items { get; set; } public string Text { get; set; } } public List<MenuItemModel> MainMenuItems = new List<MenuItemModel>{ new MenuItemModel { Text = "Align" , Items = new List<MenuItemModel> { new MenuItemModel { Text="Left" }, new MenuItemModel { Text="Right" }, new MenuItemModel { Text="Center" }, new MenuItemModel { Text="Top"}, new MenuItemModel { Text="Bottom" }, new MenuItemModel { Text="Middle"} }}, new MenuItemModel { Text = "Open" }, new MenuItemModel { Text = "Export"}, new MenuItemModel { Text = "Print" } }; private void onclick() { MainMenuItems = new List<MenuItemModel> { new MenuItemModel { Text = "File" , Items = new List<MenuItemModel> { new MenuItemModel { Text="Open" }, new MenuItemModel { Text="Save" }, new MenuItemModel { Text="Exit" } }}, new MenuItemModel { Text = "Tools" }, new MenuItemModel { Text = "Customize"}, new MenuItemModel { Text = "Help" } }; } } |
Sample link: https://blazorplayground.syncfusion.com/VZLgiitzegSunOId
Please let us know if you need any further assistance on this.
Regards,
KeerthiKaran K V
many thanks for your help
it works perfectly
You're welcome, Walter Martin. Get back to us if you need any other assistance.
NOTE: If that post is helpful, please mark it as an answer so that other members can locate it more quickly.
