Apptio for All

Apptio for All

A place for Apptio product users to learn, connect, share and grow together.

 View Only

How to: HTML pop-up box 

Sat July 09, 2022 01:03 PM

An HTML pop-up box can be a great option to add additional information to reports without overloading them.

For example, a pop-up box can be placed over a KPI to show users additional information when they hover their mouse over the KPI:
The following code was used for this example:

Here is the code to copy & paste:

<style>

svg.Note1 {

fill-opacity: 0.0;

transition: fill 1.5s;

}

svg.Note1:hover {

fill-opacity: 1.0;

transition: fill 1.5s ease;

}

</style>

 

<svg width="800" height="50" class="Note1">

<rect x="0" y="0" width="800" height="50" fill="white"/>

<text fill="#2B3856" font-size="12" font-family="Arial" x="6" y="16">=Annual OpEx Budget - Cost YTD </text>

<text fill="#2B3856" font-size="12" font-family="Arial" x="6" y="36">(Annual OpEx Buget = Total Budget of current year)</text>

</svg>


#ApptioforAll

Statistics
0 Favorited
5 Views
0 Files
0 Shares
0 Downloads

Comments

Sun January 28, 2024 10:07 PM

NICE!! 


#ApptioforAll