Dashboards & Visualizations

Help with java script used for tooltip

satyaallaparthi
Communicator

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.

0 Karma
1 Solution

satyaallaparthi
Communicator

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


     }
 );

View solution in original post

0 Karma

satyaallaparthi
Communicator

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


     }
 );
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...