Generic Tooltip to all panel on a hover

roopatvs91 · ‎05-22-2020

I am new to splunk dashboard and trying to create a generic tooltip which will apply to all panels. I have created a two sample panels with their ID's panel1 & panel2. For one panel using jquery I am able to implement tooltip in a such way that below code should take any panel id in dynamic way

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

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

$(function() {
$("#panel1").on("mouseover",function(){
var tokens = mvc.Components.get("submitted");
tokens.set("tokToolTipShow1", "true");
});
});
$(function() {
$("#panel1").on("mouseout",function(){
var tokens = mvc.Components.get("submitted");

tokens.unset("tokToolTipShow1");
});
});
}
);

niketn · ‎05-23-2020

@roopatvs91 if you have used https://answers.splunk.com/answers/236389/adding-tooltip-to-panel-on-a-hover.html to come up with Panel 1 tooltip, please extend the same to second panel with ID.

  <html id="htmlToolTip2" depends="$tokToolTipShow2$">
     <!-- Style for Tooltip Text for center alignment with panel -->
     <style>
       #htmlToolTip2{
         margin:auto !important;
         width: 20% !important;
       }
     </style>
     <div class="tooltip fade top in">
       <div class="tooltip-arrow"/>
       <div class="tooltip-inner">$tokToolTipText2$</div>
     </div>
   </html>

and in JS add the following for panel 2 with id panel2

         //On mouseover() event set the show token for the Tooltip
         $('#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");
         });

Depending on your use case actual code may change. So please add further details if above does not resolve your use case!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

Generic Tooltip to all panel on a hover

Can’t make it to .conf25? Join us online!

Community Content Calendar, September edition

Splunkbase Unveils New App Listing Management Public Preview

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Are you a member of the Splunk Community?

Generic Tooltip to all panel on a hover

Can’t make it to .conf25? Join us online!

Community Content Calendar, September edition

Splunkbase Unveils New App Listing Management Public Preview

Leveraging Automated Threat Analysis Across the Splunk Ecosystem