Dashboards & Visualizations

How to add mouse hover to display the details in the dashboard panel?

niks987
Explorer

Hi All,

Hope you are doing good.

I wanted to a add a mouse hover option for different panels which will display the details for the panel.
I have used the below code to add a mouse hover which adds an extra text "Details" and hovering over it we can get the details. But i want to that when a user hovers over the panel title than the details should be displayed also i want to use css and js within the XML as i have some credential issues for the servers.

Thanks for your help 🙂

.custom-tooltip{
display: inline;
position: absolute;
}
.custom-tooltip:hover:after{
background: #333 ;
background: rgba(0,0,0,.8) ;
border-radius: 5px ;
bottom: 26px ;
color: #fff ;
content: attr(title) ;
left: 20% ;
padding: 5px 15px ;
position: absolute ;
z-index: 98;
width: 220px;

0 Karma

jitendragupta
Path Finder

You can accomplish this easily if you convert it to HTML dashboard. The same way I am displaying Percent Speed in my dashboard using the title tag. This formula comes as a tooltip when u hover on the panel. No need for CSS and js. Please check code.

 <div id="panel1" class="dashboard-cell" style="width: 25%" title="Percent Speed=TPH (C6) / ROM">
                       <div class="dashboard-panel clearfix">
                               <h4 class="panel-title" style=" color:white;text-align: center;" >Plant Optimal Factor</h4>
                                    <div class="panel-element-row">
                                           <div id="element1" class="dashboard-element single" style="width: 100%">
                                                   <div class="panel-body"></div>
                                           </div>
                                 </div>
                     </div>
</div>
0 Karma
Get Updates on the Splunk Community!

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

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...