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(); 
  }
);

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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...