Dashboards & Visualizations

Mouse hover tooltip on inputs

mwdbhyat
Builder

Hi there,

How can I implement mouseover tooltips on input boxes/dropdowns/multiselect inputs etc?..Id like to add short explanations to the inputs I have on a dash when the user hovers over them..

Thanks!

0 Karma
1 Solution

vnravikumar
Champion

Hi @mwdbhyat

I created a small sample with Bootstrap Tooltip (static content) in Splunk 7.2.4. Try this, I hope it will help you.

<form script="tooltip.js">
  <label>tooltip</label>
  <fieldset submitButton="false">
    <input type="text" token="txt1" id="textbox1" searchWhenChanged="true">
      <label>Textbox1</label>
    </input>
    <input type="text" token="txt2" id="textbox2" searchWhenChanged="true">
      <label>Textbox2</label>
    </input>
    <input type="dropdown" token="drop1" id="dropdown1">
      <label>dropdown1</label>
      <choice value="one">One</choice>
      <choice value="two">Two</choice>
      <default>one</default>
    </input>
    <input type="multiselect" token="multi" id="multiselect1">
      <label>multiselect</label>
      <choice value="one">One</choice>
      <choice value="two">Two</choice>
      <initialValue>one</initialValue>
    </input>
    <input type="radio" token="field1" id="radio1">
      <label>radio1</label>
      <choice value="one">One</choice>
      <choice value="two">Two</choice>
    </input>
    <input type="time" token="field2" id="time1">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
</form>

javascript:

require(["jquery", "splunkjs/mvc/simplexml/ready!"], 
function($) {    
    //Find your input control and associate tool tip attribute for it. Here data-placement represents the position of tool tip(top,bottom,right,left,auto)
    $('#textbox1').find('input').attr('title','Hover on textbox1').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('#textbox2').find('input').attr('title','Hover on textbox2').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('#dropdown1').find('button').attr('title','Hover on dropdown1').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('#multiselect1 > div > div > div').attr('title','Hover on multiselect1').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('#radio1 > div > div > div').attr('title','Hover on radio1').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('#time1').find('button').attr('title','Hover on time1').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('[data-toggle="tooltip"]').tooltip(); 
  }
);

View solution in original post

vnravikumar
Champion

Hi @mwdbhyat

I created a small sample with Bootstrap Tooltip (static content) in Splunk 7.2.4. Try this, I hope it will help you.

<form script="tooltip.js">
  <label>tooltip</label>
  <fieldset submitButton="false">
    <input type="text" token="txt1" id="textbox1" searchWhenChanged="true">
      <label>Textbox1</label>
    </input>
    <input type="text" token="txt2" id="textbox2" searchWhenChanged="true">
      <label>Textbox2</label>
    </input>
    <input type="dropdown" token="drop1" id="dropdown1">
      <label>dropdown1</label>
      <choice value="one">One</choice>
      <choice value="two">Two</choice>
      <default>one</default>
    </input>
    <input type="multiselect" token="multi" id="multiselect1">
      <label>multiselect</label>
      <choice value="one">One</choice>
      <choice value="two">Two</choice>
      <initialValue>one</initialValue>
    </input>
    <input type="radio" token="field1" id="radio1">
      <label>radio1</label>
      <choice value="one">One</choice>
      <choice value="two">Two</choice>
    </input>
    <input type="time" token="field2" id="time1">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
</form>

javascript:

require(["jquery", "splunkjs/mvc/simplexml/ready!"], 
function($) {    
    //Find your input control and associate tool tip attribute for it. Here data-placement represents the position of tool tip(top,bottom,right,left,auto)
    $('#textbox1').find('input').attr('title','Hover on textbox1').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('#textbox2').find('input').attr('title','Hover on textbox2').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('#dropdown1').find('button').attr('title','Hover on dropdown1').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('#multiselect1 > div > div > div').attr('title','Hover on multiselect1').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('#radio1 > div > div > div').attr('title','Hover on radio1').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('#time1').find('button').attr('title','Hover on time1').attr('data-toggle','tooltip').attr('data-placement','bottom');
    $('[data-toggle="tooltip"]').tooltip(); 
  }
);

carbdb
Explorer

works great, many thanks!

 

... and for multi-select i.e. links input type , this is for tooltip of each of the choices:

    $('#i_stats > div > div > div').find('button[label="kosten"]').attr('title','Kosten in Euro').attr('data-toggle','tooltip').attr('data-placement','bottom');
0 Karma

mwdbhyat
Builder

Thanks alot!!

0 Karma

vnravikumar
Champion
0 Karma

mwdbhyat
Builder

@vnravikumar thanks for getting back to me!.. Looks exactly like what I need however im not sure how it relates to my dashboard(dont speak JS at all) .. would you be able to give me a small working example of how splunks xml should correlate to the fields in the JS example? I would reverse engineer thee Layer8 app but its no longer available.

0 Karma
Get Updates on the Splunk Community!

Dashboards: Hiding charts while search is being executed and other uses for tokens

There are a couple of features of SimpleXML / Classic dashboards that can be used to enhance the user ...

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

This is the fourth post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how ...

Brains, Bytes, and Boston: Learn from the Best at .conf25

When you think of Boston, you might picture colonial charm, world-class universities, or even the crack of a ...