Tooltips for menu items in collapsed sidebar

[Sandeep Desai]

Hi Team,

I am using JavaScript Sidebar control in my asp.net application. It is working fine. However, when sidebar is collapsed & only menu item icons are displayed, We want to display Tooltip to these menu item icons on hover. I did not find any solution for that on forum. Please assist.

HTML code snippet:
<ejs-sidebar id="menuSidebar" htmlAttributes="HtmlAttribute" enableDock="true" dockSize="50px" width="220px" target=".main-content" isOpen="true" type="Auto">
                    <e-content-template>
                        <div class="main-menu">
                            <div>
                                <ejs-menu id="dockMenu" onclick="OnMenuItemSelected(event.target)" items="MainMenuItems" orientation="Vertical" cssClass="dock-menu">
                                </ejs-menu>
                            </div>
                        </div>
                    </e-content-template>
                </ejs-sidebar>

Code snippet for Menu List:

Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()

    {
        {"class", "sidebar-menu" }
    };
    List<MenuItem> MainMenuItems = new List<MenuItem>{
        new MenuItem {
            Text = "Details", IconCss = "fa fa-globe-americas"
        },
        new MenuItem {
            Text = "Project mapping", IconCss = "fa fa-project-diagram"
        },
        new MenuItem {
            Text = "Task mapping", IconCss = "fa fa-tasks"
        },       
        new MenuItem {
            Text = "Expenditure mapping", IconCss = "fa fa-money-check"
        },
        new MenuItem {
            Text = "Events", IconCss = "fa fa-calendar"
        }
    };

[YuvanShankar Arunagiri]

Hi Sandeep,

We have validated your reported query and prepared the sample based on your requirement. We can achieve your requirement by using the beforeItemRender event of the menu. Please refer the below code snippet.

@using Syncfusion.EJ2;

@using Syncfusion.EJ2.Navigations;

 

@{

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

        new MenuItem {

            Text = "Details", IconCss = "fa fa-globe-americas"

        },

        new MenuItem {

            Text = "Project mapping", IconCss = "fa fa-project-diagram"

        },

        new MenuItem {

            Text = "Task mapping", IconCss = "fa fa-tasks"

        },

        new MenuItem {

            Text = "Expenditure mapping", IconCss = "fa fa-money-check"

        },

        new MenuItem {

            Text = "Events", IconCss = "fa fa-calendar"

        }

    };

 

    Dictionary<string, object> HtmlAttribute = new Dictionary<string, object>()

    {

        {"class", "sidebar-menu" }

    };

}

 

<ejs-sidebar id="menuSidebar" htmlAttributes="HtmlAttribute" enableDock="true" dockSize="50px" width="220px" target=".main-content" isOpen="false" type="Auto">

    <e-content-template>

        <div class="main-menu">

            <div>

                <ejs-menu id="dockMenu" items="MainMenuItems" orientation="Vertical" cssClass="dock-menu" beforeItemRender="itemRender">

                </ejs-menu>

            </div>

        </div>

    </e-content-template>

</ejs-sidebar>

 

<script>

    function itemRender(args) {

        args.element.children[0].setAttribute('title', args.item.text);

    }

</script>

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Sandeep Desai]

Thanks Team. It is working as expected now.

[Sandeep Desai]

Hi Team,

I am facing one more issue in this code. CSS is applied for the selected menuitem. However, whenever sidebar is toggled, selection gets removed. How to persist with the selection in case of toggle?

JavaScript Code snippet:

<script>
    document.addEventListener('DOMContentLoaded', function () {
        sidebarObj = document.getElementById("menuSidebar").ej2_instances[0];
    });
​
    function toolbarCliked(args) {
        if (args.item.tooltipText == "Menu") {            
            sidebarObj.toggle();
        }
    }

    function itemRender(args) {
        args.element.children[0].setAttribute('title', args.item.text);
    }
</script>

CSS:

.sidebar-menu .e-menu-wrapper ul .e-menu-item:hover, .e-menu-wrapper ul .e-menu-item.e-selected {
        background-color: #0AD287 !important;
        color: #000000;
    }

[YuvanShankar Arunagiri]

Hi Sandeep,

We have validated your reported query and prepared the sample based on your requirement. We can achieve your requirement by using the close and open event of the sidebar. Please refer the below code snippet.

<ejs-sidebar id="menuSidebar" htmlAttributes="HtmlAttribute" enableDock="true" dockSize="50px" width="220px" target=".main-content" isOpen="false" type="Auto" close="onClose" open="onOpen">

                <e-content-template>

                    <div class="main-menu">

                        <div>

                            <ejs-menu id="dockMenu" items="MainMenuItems" orientation="Vertical" cssClass="dock-menu" beforeItemRender="itemRender">

                            </ejs-menu>

                        </div>

                    </div>

                </e-content-template>

            </ejs-sidebar>

 

<script>

    document.addEventListener('DOMContentLoaded', function () {

        sidebarObj = document.getElementById("menuSidebar").ej2_instances[0];

        menuItemObj = null;

    });

 

    function toolbarCliked(args) {

        if (args.item.tooltipText == "Menu") {

            menuItemObj = document.getElementsByClassName("e-selected")[0];

            sidebarObj.toggle();

        }

    }

 

    function onClose(args) {

        setTimeout(function () {

            if (menuItemObj) {

                menuItemObj.classList.add('e-selected');

            }

        }, 500);

    }

 

    function onOpen(args) {

        setTimeout(function () {

            if (menuItemObj) {

                menuItemObj.classList.add('e-selected');

            }

        }, 500);

    }

 

    function itemRender(args) {

        args.element.children[0].setAttribute('title', args.item.text);

    }

</script>

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A