Mouse hover tooltip on inputs

[mwdbhyat]

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!

[vnravikumar · Accepted solution]

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]

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');

[mwdbhyat]

Thanks alot!!

[vnravikumar]

Hi

Check this

https://blog.octoinsight.com/splunk-tooltips-instructions-included/

[mwdbhyat]

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