Skip to main content
Question

FME Live: Tooltips in HTML Reports

  • July 7, 2021
  • 1 reply
  • 27 views

mark2atsafe
Safer
Forum|alt.badge.img+44

Hey FME'ers,

I just posted a video of how to create tooltips in an HTML report:

https://youtu.be/O6gT58AnvuA

 

Basically, I create an HTML table and one of the cells takes up too much space for reasonable viewing; so I turn its content into a tooltip to save space.

 

The important part is the code, which you can't get from the video, so here it is. The content of the cell is created with an AttributeManager as:

<span>Hover for more info!</span>
<div>@Value(attributeName)</div>

Then there is some custom HTML to add to the top of the report. Use a Custom HTML option in the HTMLReportGenerator with this code:

<style>
div {
  background-color: yellow;
  padding: 20px;
  display: none;
  position:fixed;
  top:80px;
  right: 350px;
}
  
span:hover + div {
  display: block;
}
</style>

Now your content will appear in a tooltip, rather than a table cell.

 

I hope this is useful. Watch the video if you need more details about where to place the above code.

1 reply

danilo_fme
Evangelist
Forum|alt.badge.img+45
  • Evangelist
  • July 13, 2021

Very interesting @mark2atsafe​ 


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings