How to add tooltip and images in ejs-menu item?

[joao.portella]

Hi,

I have ejs-menu in sidebar. Everything work fine!

How can I add tooltip in each menu item to show on hover icon when menu is docked ?

And, is it possible to use images instead of icons in menu items?

Please, give me a short example!

Thanks

[YuvanShankar Arunagiri]

Hi Joao,

Query: How can I add tooltip in each menu item to show on hover icon when menu is docked ?

Using the HtmlAtrributes parameter of items property of Menu component, we can use the tooltip attributes to respect menu items. Refer to the below code snippet.

public List<MenuItem> MainMenuItems = new List<MenuItem>{

    new MenuItem {

        Text = "Overview", IconCss = "icon-user icon", HtmlAttributes = new Dictionary<string, object> { {"title", "User" } },

            Items = new List<MenuItem> {

                new MenuItem{ Text = "Home", HtmlAttributes = new Dictionary<string, object> { {"title", "Home" } } },

                new MenuItem{ Text = "About" },

                new MenuItem{ Text = "Contact" }

            }

        }

Query: is it possible to use images instead of icons in menu items?

Using the CSS style support, we can use image as icon for respect menu items. Refer to the below code snippet.

new MenuItem {

    Text = "Users",

    IconCss = "icon-user icon",

    HtmlAttributes = new Dictionary<string, object> { {"title", "Users" } },

    ….

},

….

.sidebar-menu .icon-user {

    width: 16px !important;

    height: 16px !important;

    display: inline-block;

    background-size: contain;

    background-repeat: no-repeat;

    margin-right: 8px;

}

 

.sidebar-menu .icon-user {

    background-image: url('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png'); /* Replace with your image path */

}

Output screenshot:

Kindly check with attached sample code file and get back to us if you need any further assistance on this.

Regards,

YuvanShankar A

Attachment: Index_67c7b07c.zip

[joao.portella]

Thanks for the answer.

The image instead of the icon worked perfectly.

But the question about the tooltip is not.

I'm using Angular with Syncfusion 27.1.x and there is no HtmlAttributes parameter in my MenuItem class.

Is anything else necessary to do?

[YuvanShankar Arunagiri]

Hi Joao,

Sorry for inconvenience, our previous solution for blazor menu component. Kindly use the below solution for angular menu component. Using the beforeItemRender event, we can set the tooltip for menu bar items. Refer to the below code snippet and sample link.

UG link: https://ej2.syncfusion.com/angular/documentation/menu/how-to/set-title-icon

[app.component.html]:

<ejs-menu id="dockMenu" [items]="menuItems" orientation='Vertical' showItemOnClick="true" cssClass='dock-menu' (beforeItemRender)='onBeforeItemRender($event)'></ejs-menu>

[app.component.ts]:

public onBeforeItemRender(args: MenuEventArgs): void {

        args.element.setAttribute('title', args.item.text);

    }

Sample link: https://stackblitz.com/edit/angular-gdtbk9?file=src%2Fapp.component.html

Please let us know if you need any further assistance on this.

Regards,

YuvanShankar A

[joao.portella]

My apologies, I actually looked in the documentation, but this went unnoticed

Perfect, thanks!