Splunk input tooltip imageSplunk dashboards let users drive how and what data is presented via a multitude of mechanisms. The most common are inputs like text boxes, dropdowns, radio buttons and other familiar HTML entities.

Like a modern, user-friendly website, a Splunk dashboard should help guide the user as to when and what they enter into custom text inputs.

For the sake of simplicity, this article covers a few user experience (UX) components that are useful in building Splunk dashboards, namely tooltips and input placeholders.

If you visit any website that requires entering personal or business information, there will likely be a form containing inputs, all of which should be clearly labeled indicating what data is expected, e.g., first name, phone number, email, etc.

For Splunk dashboards (Splunk Enterprise 6.6 and prior), there is no built-in option in SimpleXML to provide tooltips or placeholder text for an input — only a label element that appears above the input item.

As my previous posts have shown, you can avoid this limitation by extending the SimpleXML Splunk dashboards with custom JavaScript.

For example, the JavaScript function shown here will set the tooltip (and the placeholder in some cases) for text-based Splunk input elements: text boxes, dropdowns and multiselect boxes. The placeholder text is set only when the identified element is a simple text box.


      // assign tooltip (and placeholder) text to Splunk input
      function setTooltipPlaceholder(name, tip, placeholder) {
        if (typeof name === 'undefined' || name.length < 1 || typeof tip === 'undefined') {
          return;
        }

        // support "name" identifier with or without leading "#"
        var eleID = (name[0] === '#' ? name : '#' + name);
        var e = $(eleID);

        // use tooltip text for placeholder if placeholder is undefined
        var p = placeholder || tip;

        // html element exists, so add text elements
        if (e.length) {

          // add tooltip and placeholder to text box inputs
          var textChild = e.children('div.splunk-textinput');
          if (textChild.length) {
            textChild.attr('title', tip);
            var textChildInputs = textChild.find('input');
            if (textChildInputs.length) {
                textChildInputs.attr('placeholder', p);
            }
          }

          // add tooltip (no placeholder) to multiselect and dropdown inputs
          var msChild = e.children('div.splunk-choice-input');
          if (msChild.length) {
            msChild.attr('title', tip);
          }
        }
      };


Using the setTooltipPlaceholder function, you can create a set of labeled inputs on a dashboard like this simplified version from the Concurrent Usage dashboard in our Layer8Insight App for Splunk.

JavaScript features
These inputs are updated using the following code shown below, assuming the text box labeled "Search Value" and multiselect input labeled "Included Executables & URL Domains" are identified in the dashboard's HTML as "input_sv" and "input_target_resources", respectively.

    require([
        'underscore',
        'jquery',
        "splunkjs/mvc",
        "splunkjs/ready!",
        "splunkjs/mvc/simplexml/ready!",
    ], function(_, $, mvc) {

      // assign tooltip (and placeholder) text to Splunk input
      function setTooltipPlaceholder(name, tip, placeholder) {
        ...
      };

      // set generic wildcard tooltip on passed element name(s) where
      // inputs can be an array or a comma-delimited list
      function setWildCardTooltip(inputElements) {
        if (typeof inputElements === 'undefined' || inputElements.length < 1) {
          return;
        }

        var newArray = inputElements;

        // test if not an Array - turn it into one if it is not
        if (Object.prototype.toString.call(inputElements) !== '[object Array]') {
          newArray = inputElements.replace(/^,+|,+$/g, '').split(",");
        }

        var len = newArray.length;

        for (var i = 0; i < len; i++) {
          setTooltipPlaceholder(newArray[i], 'Use \"*\" as a wildcard');
        }
      };

      // default input elements that should have wildcard tooltip added
      setWildCardTooltip(['input_sv', 'input_target_resources']);

      ...

    });


This code can be streamlined into a standalone JavaScript file that automatically looks for a pattern in the HTML identifier then adds predefined tooltips. I will leave that as an exercise to the reader (start by looking at the Splunk 6.x Dashboards App for Splunk or this post on Splunk Answers).

There is plenty more that can be done with HTML inputs in Splunk dashboards, such as data validation as shown here.

Future blog posts will detail other useful Splunk techniques like the CSS focus effects on the input boxes in the provided screenshots.

Stay tuned.