Help with java script used for tooltip

[satyaallaparthi]

Hello,

I have the requirement to keep tooltips for each dashboard panel.

I have 4 panels and I created 4 tokens in javascript and kept each token in each panel.

Can anyone help me with the javascript that can create with a loop where I don't have to create each token for each panel and keep the common id as ToolTip.

Because it will be hard to create 50 tokens in javascript if I have 50 panels in the dashboard.

Below is the script that I am using for tooltip.
Please help me with this script.
Thanks in advance.

Javascript:

require([
     "splunkjs/mvc",
     "splunkjs/mvc/tokenutils",
     "jquery",
     "splunkjs/mvc/searchmanager",
     "splunkjs/ready!",
     "splunkjs/mvc/simplexml/ready!"    
     ],
     function(
         mvc,
         TokenUtils,
         $,
         SearchManager
         ) {
             //jQuery to access Panel with ID and use mvc.Components.get() function to get all Submitted Tokens.
             //On mouseover() event set the show token for the Tooltip
             $('#panel1').on("mouseover",function(){
                 var tokens = mvc.Components.get("submitted");
                 tokens.set("tokToolTipShow1", "true");
             });
             //On mouseout() event unset the show token for the Tooltip to hide the same.
             $('#panel1').on("mouseout",function(){
                 var tokens = mvc.Components.get("submitted");        
                 tokens.unset("tokToolTipShow1");
              });

          $('#panel2').on("mouseover",function(){
              var tokens = mvc.Components.get("submitted");
              tokens.set("tokToolTipShow2", "true");
          });

          //On mouseout() event unset the show token for the Tooltip to hide the same.
          $('#panel2').on("mouseout",function(){
              var tokens = mvc.Components.get("submitted");        
              tokens.unset("tokToolTipShow2");
          });

          $('#panel3').on("mouseover",function(){
              var tokens = mvc.Components.get("submitted");
              tokens.set("tokToolTipShow3", "true");
          });

          //On mouseout() event unset the show token for the Tooltip to hide the same.
          $('#panel3').on("mouseout",function(){
              var tokens = mvc.Components.get("submitted");        
              tokens.unset("tokToolTipShow3");
          });

          $('#panel4').on("mouseover",function(){
              var tokens = mvc.Components.get("submitted");
              tokens.set("tokToolTipShow4", "true");
          });

          //On mouseout() event unset the show token for the Tooltip to hide the same.
          $('#panel4').on("mouseout",function(){
              var tokens = mvc.Components.get("submitted");        
              tokens.unset("tokToolTipShow4");
          });
      }
 );

And I am adding HTML code for each panel using the token from javascript.

[satyaallaparthi · Accepted solution]

require([
"splunkjs/mvc",
"splunkjs/mvc/tokenutils",
"jquery",
"splunkjs/mvc/searchmanager",
"splunkjs/ready!",
"splunkjs/mvc/simplexml/ready!"

],
function(
mvc,
TokenUtils,
$,
SearchManager
) {

    function setDelegate(panel, toolTip){

             $(panel).on("mouseover",function(){  
        var tokens = mvc.Components.get("submitted");   
                tokens.set(toolTip,"true");
             });

             //On mouseout() event unset the show token for the Tooltip to hide the same.
             $(panel).on("mouseout",function(){
                var tokens = mvc.Components.get("submitted");   
        tokens.unset(toolTip);
             });

        }

         //jQuery to access Panel with ID and use mvc.Components.get() function to get all Submitted Tokens.
         //On mouseover() event set the show token for the Tooltip

     console.log("loop tokens - function delegation, starting loop");
     for(i=1;i<50;i++)
         { 
         var p = "#panel" + i;
         var ttp = "tokToolTipShow" + i;
         setDelegate(p, ttp);   
     }


     }
 );