Create a Mouseover Tooltip In Single Value Panels, With Custom Values

Create a mouseover tooltip In Single Value Panels, with Custom Values

Hi, I hope you all have understood what I am trying to do. If not then let me give you an example, Suppose you have a single value panel, which is populating results due to the following search.

index=_internal sourcetype="splunkd_ui_access" 
| stats count by status 
| eventstats sum(count) as total 
| eval Static_Count=round((count/total)*100,3) 
| fields Static_Count 
| head 1

Now with the single value visualization mouseover or tooltip is not present by default. With the help of JavaScript, we will try to make it, and our next requirement is that whenever we will hover our mouse onto this panel in the dialog box we want to see the formula we are using to fetch this result, i.e. “Static_Count=(count/total)*100”.

Step 1:

Create a JavaScript file with the following code (single_value_mouseover.js)

The complete js is given below

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function (
    mvc
) {
        var tokens = mvc.Components.get("submitted");
        //Get Single Value by id=singleValueWithMouseover set in SimpleXML <single id="singleValueWithMouseover">
        mvc.Components.get('singleValueWithMouseover').getVisualization(function (singleView) {
            singleView.on('rendered', function () {
                //On mouseover() event unset the show token for the Tooltip to hide the same. 
                $(document).on("mouseover", "#singleValueWithMouseover div#singlevalue.single-value svg", function () {
                    tokens.set("tokShowSingleValueToolTip", "true");
                });
                //On mouseout() event unset the show token for the Tooltip to hide the same. 
                $(document).on("mouseout", "#singleValueWithMouseover div#singlevalue.single-value svg", function () {
                    tokens.unset("tokShowSingleValueToolTip");
                });
            });
        });
    });

After this put this js on the following path.

$SPLUNK_HOME/etc/apps/<app name>/appserver/static

And restart your Splunk server.

Step 2:

Now go to your dashboard and click on “Edit” and “Source Code”.

Now make the following changes as shown.

The complete source code is given below.

Now save your dashboard and refresh it.

Now hover your mouse over the panel and you will see the magic.

I hope you all have understood this simple trick of Splunk, “Create a mouseover tooltip with Single Value Panels, with Custom Values“.

Happy Splunking!!