Add tooltip to the sidebar menu name #4935

7 Answer(s)

• 

  0

  liangshiwei created one year ago

  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");
          }
      );
  });
  

  

  Save Cancel
• 

  0

  hardip created one year ago

  liangshiwei, massive thank you.

  Save Cancel
• 

  0

  hardip created one year ago

  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

  Save Cancel
• 

  0

  liangshiwei created one year ago

  Support Team Fullstack Developer

  Hi,

  Are you using BlazorServer or BlazorWASM?

  Save Cancel
• 

  0

  hardip created one year ago

  BlazorWASM

  Save Cancel
• 

  0

  liangshiwei created one year ago

  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")
  
  );
  

  Save Cancel
• 

  0

  hardip created one year ago

  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.

  Save Cancel