Dashboards & Visualizations

Generic Tooltip to all panel on a hover

roopatvs91
New Member

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

);

0 Karma

niketn
Legend

@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!!!"
0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...