In order to make this work for multiple panels, you need to have different IDs everywhere. Those changes need to correspond to the changes in JavaScript as well.
require([
"splunkjs/mvc",
"splunkjs/mvc/tokenutils",
"jquery",
"splunkjs/mvc/searchmanager",
"splunkjs/ready!",
"splunkjs/mvc/simplexml/ready!"
],
function(
mvc,
TokenUtils,
$,
SearchManager
) {
//jQuery to access Panel with ID and use mvc.Components.get() function to get all Submitted Tokens.
//On mouseover() event set the show token for the Tooltip
$('#panel1').on("mouseover",function(){
var tokens = mvc.Components.get("submitted");
tokens.set("tokToolTipShow1", "true");
});
//On mouseout() event unset the show token for the Tooltip to hide the same.
$('#panel1').on("mouseout",function(){
var tokens = mvc.Components.get("submitted");
tokens.unset("tokToolTipShow1");
});
$('#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");
});
}
);
<panel id="panel2">
----
<html id="htmlToolTip2" depends="$tokToolTipShow2$">
<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>
----
<table>
<search>
<query>index=_internal sourcetype=*
| chart count sparkline(count, 1h) as trend by sourcetype
| sort -count
| head 5</query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</latest>
<done>
<set token="tokToolTipText2">Tooltip2: Search returned $job.resultCount$ Results!</set>
</done>
</search>
<option name="drilldown">none</option>
</table>
... View more
