topic Re: Add custom help icon on every splunk dashboard panel in Dashboards & Visualizations

Add custom help icon on every splunk dashboard panel

jainvaibhav98 — Tue, 29 Sep 2020 17:53:35 GMT

Hi,
I am trying to add help icon each dashboard panel of my splunk app so that user gets to see help message when they hover over that icon.

I created a js file to add div of this implementation dynamically on window load. It works fine on my local Splunk Enterprise installation version 6.6.4. But same code stops working on our Production Splunk Enterprise which is also on same version with the only difference that it is running on search head cluster.

folowing is my code:
$( window ).on( "load", function() {
$(".dashboard-element-header").append("

");
$(".dashboard-element-header").append("");
$('.tooltip_class').hide();
$('.tooltip_class_main').hide();
$('.imageIcon_class').hover(function() {
console.log('reached showss');
$(this).parent().parent().children('.tooltip_class').show();
}, function() {
console.log('reached hidess');
$('.tooltip_class').hide();
});
});

Is there something incorrect in this code ?

Re: Add custom help icon on every splunk dashboard panel

niketn — Fri, 02 Feb 2018 17:55:09 GMT

@jainvaibhav98, Please re-post the code with Code Button with 101010 icon on Splunk Answers so that special characters do not escape.

Also let us know the intent of the code. Is the Help content going to be some static message or dynamic? Also whether it is going to be some static/ dynamic link.

Please add a mock screenshot which is working for you (ensure that you conceal any sensitive information).

Re: Add custom help icon on every splunk dashboard panel

jainvaibhav98 — Sun, 04 Feb 2018 16:37:48 GMT

hi niketan

following is the code:

$( window ).on( "load", function() {
        $(".dashboard-element-header").append("<div id='imageIcon_div' style='position: absolute; top: 14px; right: 20px; z-index:9999; width: 20px;'> <img id='imageIcon_ico' class='imageIcon_class' src='/static/app/APP_adobe_security_dashboards/info.png' /> </div>");
        $(".dashboard-element-header").append("<div id='tooltip_div' class='tooltip_class' style='position: absolute; top: -60px; right: 5px; z-index:9999; width: 250px;'> <div class='tooltip fade top in'> <div class='tooltip-inner'>Total count of accounts that are currently active for DME</div> </div> </div>");
        $('.tooltip_class').hide();
        $('.imageIcon_class').hover(function() {
                 console.log('reached showss');
                 $(this).parent().parent().children('.tooltip_class').show();
             }, function() {
                 console.log('reached hidess');
                 $('.tooltip_class').hide();
             });
    });

My intent is to attach these 2 divs as children to all elements on webpage having class "dashboard-element-header" because this is the class that all panels have.

Re: Add custom help icon on every splunk dashboard panel

jainvaibhav98 — Sun, 04 Feb 2018 16:44:30 GMT

I am unable to attach screenshot due to permission issue in this protal.

Re: Add custom help icon on every splunk dashboard panel

felipesewaybric — Sun, 04 Feb 2018 23:33:21 GMT

you can create a html block just after your panel, then you can set your js with some tokens from the search.

Re: Add custom help icon on every splunk dashboard panel

jainvaibhav98 — Mon, 05 Feb 2018 04:52:07 GMT

I actually want that each of my panel dynamically gets this div tag so adding html block would not help me here. Can you suggest why it would happen that my divs are not getting attached to parent class even when parent class
exists on checking source code