Ends in:
1 DAY
7 HRS
2 MIN
47 SEC
Ends in:
1 D
7 H
2 M
47 S
Open Closed

Add tooltip to the sidebar menu name #4935


User avatar
0
hardip created
  • ABP Framework version: v7.1
  • UI type: Blazor
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes
  • Exception message and stack trace:
  • Steps to reproduce the issue:"

The menu name is big so I want to give tooltip to it. see image

I want to add tooltip to the sidebar menu, I tries using the WithCustomData of the ApplicationMenuItem in the IMenuContributor, but could not, see image


7 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    We did not implement this functionality for the theme.

    You can do it by overriding the component:

    MyMainMenuItem

    https://gist.github.com/realLiangshiwei/f3b8c51c576a10ac220d11a6b0dc2cfe

    main.js

    
    $(function(){
        var initTooltipTrigger = function () {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        }
    
        initTooltipTrigger();
    })
    
    Configure<AbpBundlingOptions>(options =>
    {
        options.ScriptBundles.Configure(
            BlazorLeptonXThemeBundles.Scripts.Global,
            bundle =>
            {
                bundle.AddFiles("/main.js");
            }
        );
    });
    

  • User Avatar
    0
    hardip created

    liangshiwei, massive thank you.

  • User Avatar
    0
    hardip created

    liangshiwei, the tooltip works fine on the hover (mouseleave and mouseenter), but it does not hide when the menu(anchor tag) is clicked. I tried hiding it with manually remove it when its clicked but then it has to show manually as well, so it creates different problems. Any solution of this?

    ref attached

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Are you using BlazorServer or BlazorWASM?

  • User Avatar
    0
    hardip created

    BlazorWASM

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    I have updated the code: https://gist.github.com/realLiangshiwei/f3b8c51c576a10ac220d11a6b0dc2cfe

     context.Menu.AddItem(
        new ApplicationMenuItem(
            MyProjectNameMenus.HostDashboard,
            l["Menu:Dashboard"],
            "/HostDashboard",
            icon: "fa fa-chart-line",
            order: 2
        ).RequirePermissions(MyProjectNamePermissions.Dashboard.Host)
            .WithCustomData("data-bs-placement", TooltipPlacement.Top)
            .WithCustomData("data-bs-title", "Hello world")
    
    );
    
  • User Avatar
    0
    hardip created

    Hi,

    I have updated the code: https://gist.github.com/realLiangshiwei/f3b8c51c576a10ac220d11a6b0dc2cfe

     context.Menu.AddItem( 
        new ApplicationMenuItem( 
            MyProjectNameMenus.HostDashboard, 
            l["Menu:Dashboard"], 
            "/HostDashboard", 
            icon: "fa fa-chart-line", 
            order: 2 
        ).RequirePermissions(MyProjectNamePermissions.Dashboard.Host) 
            .WithCustomData("data-bs-placement", TooltipPlacement.Top) 
            .WithCustomData("data-bs-title", "Hello world") 
     
    ); 
    

    liangshiwei, it worked great, thanks a lot man.

Made with ❤️ on ABP v9.1.0-preview. Updated on November 29, 2024, 05:50