Splunk Search

How to add tooltip for radio buttons?

Ashwini008
Builder

Hi,

I have a radio button with 3 choice values. When any of the radio button is clicked or hovered it should show me some message. Can you please help me with the code?

Example:

When hovered/clicked on TR Details it should show message as 'TR' and similarly When hovered/clicked on TR DUE it should show message as 'DUE'

Below is my radio button code

<input type="radio" id="landscape" token="TR">
<label>Landscape</label>
<choice value="TR Details">TR Details</choice>
<choice value="TR DUE">TR DUE</choice>
<change>
<condition label="TR Details">
<set token="TR view">TR view</set>
<unset token="TR DUE">TR DUE</unset>
</condition>
<condition label="TR DUE">
<set token="TR DUE">TR DUE</set>
<unset token="TR view">TR view</unset>
</condition>
</change>
</input>

Tags (3)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Ashwini008 

Can you please try this?

 

<form script="a.js">
	<label>Radio Button tooltip</label>
	<fieldset submitButton="false">
		<input type="radio" id="landscape" token="TR">
			<label>Landscape</label>
			<choice value="TR Details">TR Details</choice>
			<choice value="TR DUE">TR DUE</choice>
			<change>
				<condition label="TR Details">
					<set token="TR view">TR view</set>
					<unset token="TR DUE">TR DUE</unset>
				</condition>
				<condition label="TR DUE">
					<set token="TR DUE">TR DUE</set>
					<unset token="TR view">TR view</unset>
				</condition>
			</change>
		</input>
	</fieldset>
</form>

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
    console.log("Hie 1");
    $(document).ready(function() {
        $("#landscape label:contains('TR Details')").attr({
            "data-toggle": "tooltip",
            "data-placement": "right",
            "title": "TR"
        });
        $("#landscape label:contains('TR Details')").tooltip();

        $("#landscape label:contains('TR DUE')").attr({
            "data-toggle": "tooltip",
            "data-placement": "right",
            "title": "DUE"
        });
        $("#landscape label:contains('TR DUE')").tooltip();
    });
});

 

Screenshot 2021-10-22 at 9.56.35 PM.png

 

I hope this will help you.

Thanks
KV
▄︻̷̿┻̿═━一   😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

 

View solution in original post

0 Karma

Ashwini008
Builder

@ITWhisperer Could you please help on this

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Ashwini008 

Can you please try this?

 

<form script="a.js">
	<label>Radio Button tooltip</label>
	<fieldset submitButton="false">
		<input type="radio" id="landscape" token="TR">
			<label>Landscape</label>
			<choice value="TR Details">TR Details</choice>
			<choice value="TR DUE">TR DUE</choice>
			<change>
				<condition label="TR Details">
					<set token="TR view">TR view</set>
					<unset token="TR DUE">TR DUE</unset>
				</condition>
				<condition label="TR DUE">
					<set token="TR DUE">TR DUE</set>
					<unset token="TR view">TR view</unset>
				</condition>
			</change>
		</input>
	</fieldset>
</form>

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
    console.log("Hie 1");
    $(document).ready(function() {
        $("#landscape label:contains('TR Details')").attr({
            "data-toggle": "tooltip",
            "data-placement": "right",
            "title": "TR"
        });
        $("#landscape label:contains('TR Details')").tooltip();

        $("#landscape label:contains('TR DUE')").attr({
            "data-toggle": "tooltip",
            "data-placement": "right",
            "title": "DUE"
        });
        $("#landscape label:contains('TR DUE')").tooltip();
    });
});

 

Screenshot 2021-10-22 at 9.56.35 PM.png

 

I hope this will help you.

Thanks
KV
▄︻̷̿┻̿═━一   😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

 

0 Karma

Ashwini008
Builder

@kamlesh_vaghela worked perfectly 🙂

0 Karma
Get Updates on the Splunk Community!

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

This is the second post in our Splunk Observability Cloud’s AI Assistant in Action series, in which we look at ...

Elevate Your Organization with Splunk’s Next Platform Evolution

 Thursday, July 10, 2025  |  11AM PDT / 2PM EDT Whether you're managing complex deployments or looking to ...

Splunk Answers Content Calendar, June Edition

Get ready for this week’s post dedicated to Splunk Dashboards! We're celebrating the power of community by ...