Add custom help icon on every splunk dashboard panel

[jainvaibhav98]

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("

Total count of accounts that are currently active for DME

");
$('.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 ?

[felipesewaybric]

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

[jainvaibhav98]

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

[niketn]

@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).

[jainvaibhav98]

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

[jainvaibhav98]

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.