I am new to splunk dashboard and trying to create a generic tooltip which will apply to all panels. I have created a two sample panels with their ID's panel1 & panel2. For one panel using jquery I am able to implement tooltip in a such way that below code should take any panel id in dynamic way
require([
"splunkjs/mvc",
"splunkjs/mvc/tokenutils",
"jquery",
"splunkjs/mvc/searchmanager",
"splunkjs/ready!",
"splunkjs/mvc/simplexml/ready!"
],
function(
mvc,
TokenUtils,
$,
SearchManager
) {
$(function() {
$("#panel1").on("mouseover",function(){
var tokens = mvc.Components.get("submitted");
tokens.set("tokToolTipShow1", "true");
});
});
$(function() {
$("#panel1").on("mouseout",function(){
var tokens = mvc.Components.get("submitted");
tokens.unset("tokToolTipShow1");
});
});
}
);
@roopatvs91 if you have used https://answers.splunk.com/answers/236389/adding-tooltip-to-panel-on-a-hover.html to come up with Panel 1 tooltip, please extend the same to second panel with ID.
<html id="htmlToolTip2" depends="$tokToolTipShow2$">
<!-- Style for Tooltip Text for center alignment with panel -->
<style>
#htmlToolTip2{
margin:auto !important;
width: 20% !important;
}
</style>
<div class="tooltip fade top in">
<div class="tooltip-arrow"/>
<div class="tooltip-inner">$tokToolTipText2$</div>
</div>
</html>
and in JS add the following for panel 2 with id panel2
//On mouseover() event set the show token for the Tooltip
$('#panel2').on("mouseover",function(){
var tokens = mvc.Components.get("submitted");
tokens.set("tokToolTipShow2", "true");
});
//On mouseout() event unset the show token for the Tooltip to hide the same.
$('#panel2').on("mouseout",function(){
var tokens = mvc.Components.get("submitted");
tokens.unset("tokToolTipShow2");
});
Depending on your use case actual code may change. So please add further details if above does not resolve your use case!