Dashboards & Visualizations

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


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 🙂

display: inline;
position: absolute;
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

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>
0 Karma
.conf21 Now Fully Virtual!
Register for FREE Today!

We've made .conf21 totally virtual and totally FREE! Our completely online experience will run from 10/19 through 10/20 with some additional events, too!