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

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Agent Mode Engaged! Enchaining Agentic Operations with Splunk AI Assistant 2.0

Announcing Modern Navigation: A New Era of Splunk User Experience

Modernize your Splunk Apps – Introducing Python 3.13 in Splunk

Join the Conversation

Generic Tooltip to all panel on a hover

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Agent Mode Engaged! Enchaining Agentic Operations with Splunk AI Assistant 2.0

Announcing Modern Navigation: A New Era of Splunk User Experience

Modernize your Splunk Apps – Introducing Python 3.13 in Splunk