繁体   English   中英

我们可以在 Ng-Material-Multilevel-Menu 中添加自定义工具提示吗?

[英]Can we add custom tooltip in Ng-Material-Multilevel-Menu?

我使用 ng-material-multilevel-menu 创建了一个菜单。 在标签上的 hover 上,我必须添加一个工具提示,其中包含 label 的描述。

我的 ng-material-multilevel-menu 代码:

   <ng-material-multilevel-menu [configuration]='config' class="nav" [items]='appItems'
            (selectedItem)="selectedItem($event)" (selectedLabel)="selectedLabel($event)">
    </ng-material-multilevel-menu>

我知道这里没有关键字可以通过它在其结构中添加工具提示,如下所示:

appitems = [
    {
        label: 'NPM',
        imageIcon: '/assets/batman.jpg',
        link: 'https://www.npmjs.com/package/ng-material-multilevel-menu',
        externalRedirect: true,
        hrefTargetType: '_blank' // _blank|_self|_parent|_top|framename
    },
    {
        label: 'Item 1 (with Font awesome icon)',
        faIcon: 'fab fa-500px',
        items: [
            {
                label: 'Item 1.1',
                link: '/item-1-1',
                faIcon: 'fab fa-accusoft'
            },
            {
                label: 'Item 1.2',
                faIcon: 'fab fa-accessible-icon',
                disabled: true,
                items: [
                    {
                        label: 'Item 1.2.1',
                        link: '/item-1-2-1',
                        faIcon: 'fa-allergies' // Font awesome default prefix is fas
                    },
                    {
                        label: 'Item 1.2.2',
                        faIcon: 'fas fa-ambulance',
                        items: [
                            {
                                label: 'Item 1.2.2.1',
                                faIcon: 'fas fa-anchor',  // Still you can specify if you want to
                                onSelected: function() {
                                    console.log('Item 1.2.2.1');
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    },
    {
        label: 'Item 2',
        icon: 'alarm',
        items: [
        {
            label: 'Item 2.1',
            link: '/item-2-1',
            icon: 'favorite_border',
            activeIcon: 'favorite',
            disabled: true,
        },
        {
            label: 'Item 2.2',
            link: '/item-2-2',
            icon: 'favorite_border',
            activeIcon: 'favorite',
            navigationExtras: {
                queryParams: { order: 'popular', filter: 'new' },
            }
        }
        ]
    },
    {
        label: 'Item 3',
        icon: 'offline_pin',
        onSelected: function() {
            console.log('Item 3');
        }
    },
    {
        label: 'Item 4',
        link: '/item-4',
        icon: 'star_rate',
        hidden: true
    }
];

关于如何添加工具提示的任何建议?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM